Javascript Jquery可拖放和可排序的组合

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

我认为拖拽/可拖放将是一种可行的方式，它工作得很好，但是，现在我们希望，如果一个拖拽放在另一个拖拽上，我们可以交换拖拽。因此，现在看来，分类将是一条路要走。然而，sortable看起来更像是用于列表，而我并没有像列表一样编写它

有没有一种简单的方法可以让我到目前为止所做的工作正常进行，或者我需要使用sortable完全重写它？我是javascript新手，我花了一段时间才走到这一步，我并不要求编写代码，但我害怕不得不再次把整个事情弄清楚！有什么意见吗

下面是我的一堆代码：

以及守则：

html

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

感激地接受的任何意见

首先，切勿使用以数字或符号开头的ID。据此：

ID和名称标记必须以字母（[a-Za-z]）开头，后面可以是任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“）、冒号（：”）和句点（“.”）

---

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

我从头开始，但保留了您的应用程序中使用的

可拖动

&

可拖放

选项。以下是我的想法（请随意更改任何方面）：

演示：

JAVASCRIPT: HTML:

---

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

网格的尺寸是多少？最大列/行数？您是否只能移动链接或div可以在网格内移动？此外，是否有任何代码必须保持原样？或者我可以编辑它的任何方面吗？@Dom，谢谢你的回复，很抱歉延迟了你的回复，我在英国。回答你的问题。用户可以向网格中添加行或列。这就是为什么每个dropable都有1:4的ID。只要代码有效，您就可以更改代码的任何方面！目前，你只能移动链接，但如果它需要是div，我想这没关系，只要它们仍然是可点击的链接，并且它们可以被移动。我发布了一个解决方案，让我知道这是否是你正在寻找的。

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

$('.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 ));
      }
}

$(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);
        }
    });
});

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

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