可拖动的 droppable 和 sortable

Question

我们试图集成多个 drggable 和 droppable。在这种情况下，我们使用 sortable 来简化克隆功能。拖放后可拖动需要再次拖动。

我们如何将 sortable 限制为仅接收一个元素并在多个元素落入时恢复为原始元素。

在这种情况下，sortable 的过度功能看起来行为不端。

注释行代码用于禁用在可排序上删除第二个元素。这没有按预期工作。

启用我的注释代码时的两个问题：

1. 从 droppable 移出后，可拖动克隆不会恢复到原始位置。
2. draggable 元素从一个 droppable 移动到另一个可恢复到 draggable 的原始位置。

如需演示，请参阅 this jsfiddle

脚本：

//  jQuery.noConflict();

jQuery( document ).ready(function() { init();});
function init() {

  var mouse_button = false;
  jQuery('.ui-draggable').live({
      mousedown: function () {
          mouse_button = true;
      },
      mouseup: function () {

          if (jQuery(this).attr('data-pos') == 'out' && jQuery(this).attr('data-id')) {
              var p = jQuery('#' + jQuery(this).attr('data-id'));
              var offset = p.offset();
              jQuery(this).hide();
              jQuery(this).animate({ left: offset.left, top: offset.top, width: jQuery(this).width, height: jQuery(this).height }, 100, function () {
                  jQuery(this).remove();
                  $( ".ui-droppable" ).each(function() {
                    if($(this).children().length == 0) {
                      $( this ).removeClass("dontDrop");
                    }
                  });
                  //if(p[0].hasAttribute("draggable"))
                  p.draggable("enable");

             //     $('.ui-droppable').sortable('option', 'connectWith',$('.ui-droppable').not('.dontDrop'));
             //     $('.ui-draggable').draggable('option', 'connectToSortable',$('.ui-droppable').not('.dontDrop'));

              });
          }
          mouse_button = false;
      },
      mouseout: function () {
          if (mouse_button) {
              mouse_button = false;
          }
      }

  });

    jQuery( '.ui-draggable' ).draggable( {
      cursor: 'move',
      helper: 'clone',
      connectToSortable: ".ui-droppable",
      revert: function (event, ui) {
        }
    } );


    jQuery(".ui-droppable").sortable({
        cursor: "move",
        connectWith: ".ui-droppable",
        receive: function (event, ui) {

        if($(this).children().length >= 1) {

            $(this).children().addClass('filled');
            $(this).addClass('dontDrop');

            $( ".ui-droppable" ).each(function() {
              if($(this).children().length == 0) {
                $( this ).removeClass("dontDrop");
              }
            });
       //     $('.ui-droppable').sortable('option', 'connectWith',$('.ui-droppable').not('.dontDrop'));
       //     $('.ui-draggable').draggable('option', 'connectToSortable',$('.ui-droppable').not('.dontDrop'));
        }else {
            $(this).children().removeClass('filled');
        }
        if (jQuery(this).data().sortable.currentItem) {
                jQuery(this).data().sortable.currentItem.attr('data-id', jQuery(ui.item).attr("id"));
               // if(jQuery(ui.item)[0].hasAttribute("draggable"))
                jQuery(ui.item).draggable("disable");
            }

        },
        out: function (event, ui) {  if (ui.helper) { ui.helper.attr('data-pos', 'out'); } },
        over: function (event, ui) { ui.helper.attr('data-pos', 'in'); }
    });

  }

Answer 1

这是一个工作示例：click here

您可以使用 Jquery 的 draggable 和 droppable 交互来实现您想要的。检查工作示例。

$(document).ready(function () {

  $(".ui-draggable").draggable(draggable_options) //make cards draggable

  $(".ui-droppable").droppable({ //handle card drops
    greedy: true,
    drop: function (event, ui) {
      handleDrop(this, event, ui)
    },
    accept: function () {
      return checkIfShouldAcceptTheDraggable(this)
    }
  })
})

Answer 2

你可以这样做：(Online Demo (fiddle))

var draggable_options = {
  helper: 'clone',
  cursor: 'move',
  revert: 'invalid',
};

$(".ui-draggable").draggable(draggable_options);

$(".ui-droppable").droppable({
  drop: function(event, ui) {
    var $item = ui.draggable;
    $item.draggable(draggable_options)
    $item.attr('style', '')
    $(this).append($item)
  },
  accept: function() {
    return $(this).find("li").length === 0 // Your condition
  }
});

$(".textToImageRightPanel").droppable({
  drop: function(event, ui) {
    var $item = ui.draggable;
    $item.draggable(draggable_options);
    $item.attr('style', '');
    // Return to older place in list
    returnToOlderPlace($item);
  }
});

// Return item by drop in older div by data-tabidx
function returnToOlderPlace($item) {
  var indexItem = $item.attr('data-tabidx');
  var itemList = $(".textToImageRightPanel").find('li').filter(function() {
    return $(this).attr('data-tabidx') < indexItem
  });
  if (itemList.length === 0)
    $("#cardPile").find('ul').prepend($item);
  else
    itemList.last().after($item);
}

Answer 3

最好使用revert: function(){} 在.draggable() 中确定何时恢复。

功能： 确定元素是否应恢复到其起始位置的功能。该函数必须返回 true 才能恢复元素。

你可以这样做：

  jQuery('.ui-draggable').draggable({
    cursor: 'move',
    helper: 'clone',
    connectToSortable: ".ui-droppable",
    revert: function(item) {
      if (!item) {
        return true;
      } else {
        if (item.hasClass("dontDrop")) {
          return true;
        }
      }
      return false;
    }
  });

如果不接受可拖动项目，则通过false 恢复函数。例如，如果它掉在不是目标的东西上。如果接受了可拖动项，则返回一个 jQuery 对象。

查看更多：jQueryUI sortable,draggable revert event

逻辑有点混乱。如果传回的是false，我们将true返回到revert，让可拖动的项目恢复到它的位置。如果传回的不是false，那么它就是我们可以测试的对象。如果目标是“满的”，我们就还原。否则我们不会还原。

Sortable 出于某种原因仍想添加该项目。可能需要调整到update 并清除所有不属于"filled" 类的项目。

小提琴：https://jsfiddle.net/Twisty/7mmburcx/32/