我被要求创建一个正方形网格,其中每个正方形可能包含或不包含链接,这些链接应该能够围绕网格移动.
我认为draggable / droppable将是可行的方式并且它可以正常工作,但是,现在我们希望能够让draggables交换,如果一个被丢弃在另一个之上.所以它现在看起来像是可以排序的.但是,sortable看起来更像是列表的意思,而我没有像列表那样编写它.
有没有一种简单的方法来制作我到目前为止所做的工作,或者我是否需要使用可排序的方式完全重写它？我是javascript的新手,我花了一段时间才能做到这一点,而且我不是要求代码,但我担心必须重新计算整个事情！任何意见？
这是我的代码的一个小提琴：http://jsfiddle.net/kvVkT/
和代码：
HTML
<div id="gridcontainer">
<div id="-2:-2" class="droppable occupied">
<a href="" id ="508" class="bookmark draggable white" title="white" "target="_blank">1</a>
</div>
<div id="-2:-1" class="droppable">2</div>
<div style="clear:both"></div>
<div id="-2:0" class="droppable">3</div>
<div id="-2:1" class="droppable occupied">
<a href="" id ="567" class="bookmark draggable white" title="white" "target="_blank">4</a>
</div>
<div style="clear:both"></div>
</div>
CSS
#gridcontainer{position:relative;padding:25px;color:#ff0004;background:#ffffff;}
.droppable{width:65px; height:65px;float:left; margin:5px;background:#000000;}
.bookmark {float:left;width:65px; height:65px;display:block;position:absolute;}
.position{float:left;width:65px; height:65px;display:block;}
.position:hover{background-image:url(../img/tilehover.png);}
.bookmark.ui-draggable-dragging {-moz-Box-shadow: 0 0 5px #d9d9d9; -webkit-Box-shadow: 0 0 5px #d9d9d9; Box-shadow: 0 0 5px #d9d9d9;}
.draggable{ background:#888888;}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
JavaScript的
$('.draggable').draggable({ start: function() {$('#dropdownAddTile').slideDown();},stop: function() {$('#dropdownAddTile').slideUp();},containment: '#container',snap:'.droppable',snapMode:'inner',revert:'invalid',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent,accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
function handleDropEvent( event,ui ) {
event.preventDefault();
var draggable = ui.draggable;
var droppable = $(this);
var droppableId = $(this).attr("id");
var draggableId = ui.draggable.attr("id");
$('.draggable').draggable({containment: '#container',snapTolerance: 32});
$('.droppable').droppable({drop: handleDropEvent,accept: function(e){if(e.hasClass('draggable')) { if (!$(this).hasClass('occupied')) {return true; }}}});
var initPosit = ui.draggable.parent().attr('id');
//save new position
$.post("tiles/updateTilePosition",{ draggableId:draggableId,droppableId: droppableId }).done(function(data) {
//alert(data);
})
$(this).addClass('occupied');
ui.draggable.parent().removeClass('occupied');
if($(ui.draggable).parent() !==$(this)){
$(ui.draggable).appendTo($( this ));
}
}
感激地收到任何意见
解决方法
首先,永远不要使用以数字或符号开头的ID.根据这个
solution：
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters,digits ([0-9]),hyphens (“-“),underscores (“_”),colons (“:”),and periods (“.”).
现在让我们清理一些代码.对于您目前的情况,我建议使用.draggable()和.droppable().
我从零开始,但保持拖延和& jsfiddle中使用的可放置选项.这是我想出的(随意改变它的任何方面)：
DEMO：
http://jsfiddle.net/dirtyd77/Y8dLz/
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;
}
我希望这就是你要找的！如果您需要任何进一步的解释或有任何其他问题,请告诉我们！快乐的编码！
