Jquery ui 拖放和排序

Question

我有 6 个选项可以拖放 6 个可放置区域。可放置区域不应有一个以上的拖动元素。如果可放置区域已经有一个元素并放置了另一个元素，它应该只是将现有元素移动到下一个同级元素。

我想要和 jquery sortable 完全一样，但是拖放后应该像这样工作。

查找fiddle demo here.

$(".qselected").sortable();
$(".qselected").disableSelection();

$(".qitem").draggable({
    containment : "#container",
    helper : 'clone',
    revert : 'invalid'
});

$(".qselected, #qlist").droppable({
    hoverClass : 'ui-state-highlight',
    drop : function(ev, ui) {

    if($('.qselected div').length){
        //$('.qselected div').eq(0).remove().appendTo();
    } 
    $(ui.draggable).clone().appendTo(this);
    $(ui.draggable).remove();

        $(".qitem").draggable({
            containment : "#container",
            helper : 'clone',
            revert : 'invalid'
        });
    }
});

Answer 1

根据您的描述不确定可排序部分，但这是处理可放置部分的一种方法：

示例：http://jsfiddle.net/Twisty/s08pf0g9/

JavaScript

$(document).ready(function() {
  $(".qselected").sortable();
  $(".qselected").disableSelection();

  $(".qitem").draggable({
    containment: "#container",
    revert: 'invalid'
  });

  $(".qselected, #qlist").droppable({
    hoverClass: 'ui-state-highlight',
    drop: function(ev, ui) {
      var $item = ui.draggable.detach();
      var $target = $(ev.target);

      if ($target.find(".qitem").length === 0) {
        console.log("Target is empty, dropping here.");
        $item.attr("style", "");
        $item.appendTo($target);
      } else {
        console.log("Target is full.");
        $(".qselected").each(function(i, el) {
          if ($(el).find(".qitem").length === 0) {
            console.log("target " + i + " is empty, dropping here.");
            $item.attr("style", "");
            $item.appendTo($(el));
            return false;
          }
        });
      }
    }
  });
});

首先，分离拖动的项目。其次检查目标是否已经包含 .qitem。如果是，找到下一个空位。

这不会像 sortable 那样工作。正如我在评论中提到的，我建议创建一个空的 sortable（作为目标），然后用户可以拖入项目。这可能看起来像：

http://jsfiddle.net/Twisty/s08pf0g9/1/

$(document).ready(function() {
  $("#sorting").sortable({
    items: "> div.qselected",
    receive: function(e, ui) {
      var $item = $(this).find(".ui-draggable");
      $item.removeClass("ui-draggable");
      $item.next().append($item);
    }
  });
  $("#sorting").disableSelection();

  $(".qitem").draggable({
    containment: "#container",
    connectToSortable: "#sorting",
    helper: 'clone',
    revert: 'invalid'
  });
});