Question

我有6个选项可以在6个可放置区域中拖放。可放置区域不应该有更多的拖动元素。如果一个可放置区域已经有一个元素而又丢弃了另一个元素，那么它应该只将已存在的元素移动到下一个兄弟元素。

我想要与 jquery sortable 完全相同，但拖放后这应该是这样的。

$(".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

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

示例：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（作为目标），然后用户可以拖入item。这可能看起来像：

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

Jquery ui拖放，排序和排序

1 个答案: