First, never使用以数字或符号开头的 ID。根据这个solution https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html#answer-79022:
ID 和 NAME 令牌必须以字母 ([A-Za-z]) 开头,后可跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") 、冒号(“:”)和句点(“.”)。
现在让我们清理一些代码。对于您目前的情况,我建议使用.draggable() http://jqueryui.com/draggable/ and .droppable() http://jqueryui.com/droppable/.
我从头开始,但保留了draggable
& droppable
您中使用的选项jsfiddle http://jsfiddle.net/kvVkT/。这是我想到的(随意更改它的任何方面):
DEMO:
http://jsfiddle.net/dirtyd77/Y8dLz/ http://jsfiddle.net/dirtyd77/Y8dLz/
http://fiddle.jshell.net/dirtyd77/Y8dLz/show/ http://fiddle.jshell.net/dirtyd77/Y8dLz/show/
JavaScript:
$(function () {
$('#container div').draggable({
containment: "#container",
helper: 'clone',
snap: true,
snapMode: 'inner',
snapTolerance: 32,
revert: 'invalid'
});
$('#container div').droppable({
hoverClass: 'ui-state-highlight',
drop: function (event, ui) {
var _drop = $(this),
_drag = $(ui.draggable),
_dropChildren = _drop.children(), //original drop children
_dragChilden = _drag.children(); //original drag children
if(_dropChildren.length > 0){
_dropChildren.appendTo(_drag);
}
_dragChilden.appendTo(_drop);
}
});
});
HTML:
<div id="container">
<div>
<a href="#somelink1" class="link1">Link 1</a>
</div>
<div></div>
<div>
<a href="#somelink2" class="link2">Link 2</a>
</div>
<div></div>
<div>
<a href="#somelink3" class="link3">Link 3</a>
</div>
<div>
<a href="#somelink1" class="link1">Link 4</a>
<a href="#somelink3" class="link3">Link 5</a>
</div>
</div>
CSS:
div:not(#container) {
border:1px solid orange;
}
#container {
padding:20px;
margin:10px;
float: left; /* needed for containment option */
width: 336px;
height: auto;
border:1px solid green;
}
#container div {
margin: 4px;
padding: 0px;
float: left;
width: 100px;
height: 90px;
text-align: center;
}
.link1{
color: purple;
}
.link2{
color: red;
}
.link3{
color: green;
}
我希望这就是您正在寻找的!如果您需要任何进一步的解释或有任何其他问题,请告诉我!快乐编码!