Jquery draggable / droppable和sortable組合

Question

我被要求創建一個正方形網格，其中每個正方形可能包含或不包含鏈接，這些鏈接應該能夠圍繞網格移動。

我認為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', 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：

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

我希望這就是你要找的！ 如果您需要任何進一步的解釋或有任何其他問題，請告訴我們！ 快樂的編碼！