可拖放的可排序的

Question

我們嘗試集成多個可拖動和可拖放的對象。 在這種情況下，我們使用sortable來簡化克隆功能。 一旦拖放，就需要再次拖動。

我們如何限制可排序僅接收一個元素，如果有多個元素落入原始元素，則將其還原為原始元素。

在這種情況下，sortable的遍歷函數看起來異常。

注釋行代碼用於禁用將第二個元素拖放到sortable上。 不能按預期工作。

啟用我的注釋代碼時，有兩個問題：

1. 從可放置位置移出后，可拖動的克隆不恢復到原始位置。
2. 可拖動元素從一個可放置元素移動到另一可放置元素，還原為可拖動元素的原始位置。

有關演示，請參見此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

這是一個工作示例： 單擊此處

您可以在用戶jQuery的拖動和投擲的相互作用來實現你想要的。 檢查工作示例。

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

您可以這樣操作：（ 在線演示（小提琴） ）

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

確定何時還原最好在.draggable()使用revert: function(){} 。

功能：確定元素是否應還原到其起始位置的功能。 該函數必須返回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;
    }
  });

如果不接受可拖動項，則將revert函數傳遞給false 。 例如，如果將它放在不是目標的東西上。 如果可拖動項被接受，則將jQuery對象傳遞回去。

查看更多： jQueryUI可排序，可拖動的還原事件

邏輯有點混亂。 如果傳回的內容為false ，則返回true進行revert讓可拖動的內容將其還原到其位置。 如果傳回的內容不是false ，那么這是我們可以測試的對象。 如果目標是“完整”，我們將還原。 否則，我們不會還原。

由於某些原因，Sortable仍要添加項目。 可能需要進行調整以update和清除所有未歸類為"filled" 。

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