Jquery draggable / droppable和sortable组合

我被要求创建一个正方形网格，其中每个正方形可能包含或不包含链接，这些链接应该能够围绕网格移动。

我认为draggable / droppable将是可行的方式并且它可以正常工作，但是，现在我们希望能够让draggables交换，如果一个被丢弃在另一个之上。 所以它现在看起来像是可以排序的。 但是，sortable看起来更像是列表的意思，而我没有像列表那样编写它。

有没有一种简单的方法来制作我到目前为止所做的工作，或者我是否需要使用可排序的方式完全重写它？ 我是javascript的新手，我花了一段时间才能做到这一点，而且我不是要求代码，但我担心必须重新计算整个事情！ 任何意见？

这是我的代码的小提琴： http ： //jsfiddle.net/kvVkT/

和代码：

HTML

 
  
 
2
 
 
3
 
  
 
  

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', 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; }}}}); 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 )); } } 

感激地收到任何意见

Answer 1

首先， 永远不要使用以数字或符号开头的ID。 根据这个解决方案 ：

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ – ”），下划线（“_”） ，冒号（“：”）和句号（“。”）。

---

现在让我们清理一些代码。 对于您目前的情况，我建议使用.draggable()和.droppable() 。

我从头开始，但保留了jsfiddle中使用的draggable和droppable放置的选项。 这是我想出的（随意改变它的任何方面）：

演示： 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：

 
 
 Link 1 
 
 
 Link 2 
 
 
 Link 3 
 
 Link 4 Link 5 
  

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; } 

我希望这就是你要找的！ 如果您需要任何进一步的解释或有任何其他问题，请告诉我们！ 快乐的编码！