关于 jquery 中的可拖动元素答案

【问题标题】：About draggable elements in jquery关于 jquery 中的可拖动元素
【发布时间】：2014-01-11 10:48:37
【问题描述】：

我对 jQuery 没有太多经验。

我有 4 个li 元素和一个可拖动的块。当我从绿色拖到蓝色时，首先我需要我的拖动块站在蓝色后面，并且不超出容器的边界，这意味着我的可拖动元素必须始终卡入容器中。

当我的可拖动元素站在蓝色后面时，背景颜色必须从棕色变为红色。

有人可以帮我吗？因为我真的不知道该怎么做。我此刻所拥有的就是：JSFiddle

HTML

<div id="container"  class="ui-widget-header">
<div id="draggable" class="ui-widget-content"></div>
<ul id="menu">
    <li id="menuElement1"></li>
    <li id="menuElement2"></li>
    <li id="menuElement3"></li>
    <li id="menuElement4"></li>
</ul>
</div>

CSS

body {
    background-color: brown;
}
#container {
    position: relative;
}
#menu,
#draggable {
    position: absolute;
    top: 0;
    left: 0;
}
#draggable {
    width: 100px;
    height: 150px;
}
#menu {
    margin-left: -40px;
}
ul li {
    display: block;
    float: left;
    padding: 50px;
}
#menuElement1 {
    background-color: green;
}
#menuElement2 {
    background-color: blue;
}
#menuElement3 {
    background-color: black;
}
#menuElement4 {
    background-color: red;
}
#container {
    height: 150px;
    width: 100%;
    background-color: gray;

jQuery

$(function() {
    $( "#draggable" ).draggable({ snap: ".ui-widget-header" });
});

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

这是更新后的fiddle

您最好从 jQuery 文档中阅读Droppable 上的这篇文章。基本上你已经完成了一半，你需要制作一个可放置的元素（蓝色框，id 为 #menuElement2），以便为可拖动元素提供目标

$('#menuElement2').droppable({
  drop: function( event, ui ) {
    //Do something here...
  }
});

在 drop 函数中（当方块被放到目标上时触发）你需要执行你的动作。

$('body').css({'background-color': 'red'});

这会在正文中添加一个自定义 css 规则来更改颜色，再次查看 jQuery 文档 - 搜索“jQuery css”。

希望这会有所帮助:)

更新：我刚刚再次更新了小提琴，使其在您更改选择时恢复为棕色 - 不确定您是否想要这个，但可以通过在拖动功能中注释掉 css 更改来轻松删除它。

【讨论】：