javascript - 关于 jquery 中的可拖动元素

Question

我对 jQuery 没有太多经验。

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

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

有人能帮帮我吗？因为我真的不知道该怎么做。我现在所拥有的是: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" });
});

Answer 1

这是更新的 fiddle

你最好在 Droppable 上阅读这篇文章来自 jQuery 文档。基本上你已经完成了一半，你需要使一个元素(蓝色框，id 为#menuElement2)可放置，为可拖动元素提供目标

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

在 drop 函数中(当方 block 被放到目标上时触发)你需要执行你的 Action 。

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

这会向更改颜色的主体添加自定义 css 规则，再次查看 jQuery 文档 - 搜索“jQuery css”。

希望这有帮助:)

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