Question

我对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" });
});

Answer 1

这是更新后的fiddle

您最好从jQuery文档中阅读Droppable上的这篇文章。基本上你是在那里的一半，你需要制作一个元素（蓝色框，id＃menuElement2）droppable为可拖动元素提供目标

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

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

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

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

希望这会有所帮助：）

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

关于jquery中的可拖动元素

1 个答案: