jQuery droppable-只允许将一个项目拖放到元素上，然后再次使被拖放的项目可拖动 [英] jQuery droppable - allow only one item to be dropped on an element and then make the dropped one draggable again

问题描述

使用 jQuery droppable ，我也有多个可拖动对象和可放置对象.一次只能将一个可拖动对象拖放到一个元素上.但是，放置后，应再次为可拖动对象赋予拖动功能. 我面临的问题是，多个可拖动对象可以放在一个元素上.我的代码如下:

with jQuery droppable, I have multiple draggables and droppable as well. Only one draggable should be allowed to be dropped on an element at a time. However, after dropping, the draggable should be given the dragging capability again. The problem I am facing is that multiple draggable can be dropped on one element. My code follows:

<div id="draggable_all" style="float: left;  width: 300px;">
<div class="draggable">drag1111</div>
<div class="draggable">drag2222</div>
<div class="draggable">drag3333</div>
</div>

<div id="droppable_all" style="float: left; width:300px; ">



<div class="droppable"></div>
<div class="droppable"></div>
<div class="droppable"></div>
</div>

CSS:

 <style type="text/css">
        .droppable {
            width: 120px;
            height: 120px;
            background: red;
            margin-bottom: 30px;
            /*position: absolute;*/
            /*right: 0;*/
            /*bottom: 0;*/
        }
        .draggable {
            /*position: absolute;*/
            z-index: 9;
            /*top: 25px;*/
            /*left: 20px;*/
            width: 120px;
            height: 120px;
            background-color: green;
            margin-bottom: 30px;
        }
    </style>

和JS:

$(document).ready(function(){

$(document).ready(function () {

    $(".draggable").draggable({
        revert: handleRevert
    });

    $(".draggable").data("orDraggable",$(".draggable").offset());

    $(".droppable").droppable({
        drop: handleDropEvent
        //,
        // out: function(event, ui){
        //     $(this).droppable('option', 'accept', '.drag-item');
        // }
    });

    function handleRevert(e) {
        if (e === false) {
            $(this).data("uiDraggable").originalPosition = $(this).data("orDraggable");
            return true
        }
    }

    function handleDropEvent(event, ui) {
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });

        //$(this).droppable('option', 'accept', ui.draggable);
       // $(this).droppable('disable');


    }

});

如何实现?

PS:SO有类似的问题，但没有一个能很好地解决我的问题.例如，此问题试图解决该问题.但是这里的问题是:放置的元素与放置它的元素的对齐方式不同.

PS: SO has similar questions but none solves my problem well. For example , this question tries to solve it. But the problem here is : the dropped element does not have the same alignment against the element on which it is dropped.

我在此处做了一个jsfiddle，但CSS有所变化.

I made a jsfiddle here with a bit change in CSS.

推荐答案

正如我在评论中提到的那样，当放置该项目时，可以禁用或销毁Droppable.这样可以防止进一步掉落.您还可以更改accept选项，以使其不再接受.

As I mentioned in my comment, you can disable or destroy Droppable when the item is dropped. This will prevent further drops. You can also change the accept option so that it will not accept any more if you like.

以下是第一个解决方案的示例: https://jsfiddle.net/Twisty/upfy74tw /12/

Here is an example of the first solutions: https://jsfiddle.net/Twisty/upfy74tw/12/

JavaScript

$(function() {
  function handleRevert(e) {
    var $t = $(this);
    if (e === false) {
      $t.data("uiDraggable").originalPosition = $t.data("orDraggable");
      return true
    }
  }

  function handleDropEvent(event, ui) {
    var $self = $(this);
    var $item = ui.draggable;
    $item.position({
      my: 'left top',
      at: 'left top',
      of: $self
    });
    $self.droppable("destroy");
    $item.appendTo($self).attr("style", "");
    $item.draggable("destroy");
    $item.draggable({
      start: function() {
        $self.droppable({
          drop: handleDropEvent
        });
      }
    })
  }

  $(".draggable").draggable({
    revert: handleRevert
  });

  $(".draggable").data("orDraggable", $(".draggable").offset());

  $(".droppable").droppable({
    drop: handleDropEvent
  });
});

放置事件中发生了一些事情.

There are a few things going on in your drop event.

1. 销毁可滴剂
2. 对齐可拖动对象，然后将其附加到容器中
3. 销毁可拖动
4. 在drag事件开始时分配可拖动对象并重新分配可放置对象

1. Destroy droppable
2. Align the draggable and then append it to the container
3. Destroy draggable
4. Assign Draggable and re-assign Droppable at start of drag event

希望有帮助.

这篇关于jQuery droppable-只允许将一个项目拖放到元素上，然后再次使被拖放的项目可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！