Question

我们尝试集成多个drggable和droppable。在这种情况下，我们使用sortable来简化克隆功能。一旦掉落就需要再次拖拽。

我们如何限制sortable只接收一个元素，如果多个元素掉落到原始元素上，则恢复原始元素。

在这种情况下，看起来像outable和outable的功能都行为不端。

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

启用我的评论代码时出现两个问题：

可拖动克隆在移出droppable后无法恢复到原始位置。
可拖动元素从一个droppable移动到另一个dropable转换为可拖动的原始位置。

有关演示，请参阅 https://github.com/docker/compose/issues/3352

脚本：

//  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)）

//console.log(id) <- prints 1. We are modifying the second object in the array with id 1.

// iterate items array
let { items } = this.state;
for (var index in items) { 
  if(items[index].id === id) {
     // copy the whole object matching id is 1.
     var deep = _.cloneDeep(tag); 

     //Assign new values (newLeft: 300, newRight:200, newCalssified: true)
     deep.left = newLeft
     deep.right = newRight
     deep.classified = newClassified

    this.setState({
      // HERE IS THE QUESTION
      taggedClothes // how do we modify the object with id 1??
    })
  }
}

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

如果不接受可拖动项目，则会传递恢复功能false。例如，如果它被放在不是目标的东西上。如果接受了可拖动项，则传回jQuery对象。

查看更多：jQueryUI sortable,draggable revert event

逻辑有点令人困惑。如果传回的内容为false，我们会将true返回revert，让可拖动的项目会将项目还原到其位置。如果传回的内容不是false，那么它就是我们可以测试的对象。如果目标是＆＃34;完全＆＃34;，我们还原。否则我们不会还原。

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

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

可拆卸的可拖动可投放式

3 个答案: