0
我對jQuery沒有太多經驗。關於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" });
});
哇,謝謝你,你真棒 – BorHunter