借助jQuery拖放 [英] Drag and drop with the help of jQuery

问题描述

我希望能够使用jQuery的可拖动功能将一个对象移动到另一个对象中. 我可以在容器中移动对象并能够在其中移动. 但是，当我尝试向要移动的对象添加辅助对象时，此方法不再起作用. 我希望当我选择一个项目将其放置在我的容器中时，它会自我复制. 以下是我目前可以做的事情:

I'd like to be able to move an object into another with the function draggable of jQuery. I can move an object in the container and able to move in it. But when I try to add helper to objects to move, this no longer works. I want that when I select an item to deposit it in my container, it duplicates itself. Below is what I have managed to do for the moment:

JSFiddle

$(".drag").draggable({
    opacity: 0.7,
    snap: '#drop',
    cursor: "move",
    revert: "invalid",
    //helper: "clone"
});

$("#drop").droppable({
    drop: function(event, ui) {

    }
});

<div class="drag">
    <p>Exemple bloc</p>
</div>
<div class="drag">
    <p>Exemple bloc</p>
</div>


<div id="drop">
   <p>Drop here</p>
</div>

我存放在.drop克隆中的元素，必须能够在容器.drop

The element I deposited in .drop clone and must be able to move in the container .drop

推荐答案

我已经编辑了您的小提琴: http://jsfiddle.net/3tjbhjtq/54/ 这是代码:

I have edited your fiddle: http://jsfiddle.net/3tjbhjtq/54/ Here is the code:

$(".drag").draggable({

  opacity  : 0.7,
  snap     : '#drop',
  cursor   : "move",
  revert   : "invalid",
  helper   : "clone"

});

$("#drop").droppable({

  drop: function(event, ui) {

    var currenOffset = ui.offset;

    var dropedObjectCss = {
      "position" : "absolute",
      "left"     : currenOffset.left,
      "top"      : currenOffset.top
    };

    var tag = ui.draggable;

    if (tag.data('alreadydropped')) {
      var newItem = tag.css(dropedObjectCss).appendTo( this ); 

      newItem.draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    } else {
      var newItem = tag.clone().css(dropedObjectCss).appendTo( this );

      newItem.data('alreadydropped', true).draggable({
        opacity : 0.7,
        snap    : '#drop',
        cursor  : "move",
        revert  : "invalid"
      });

    }
  }
});

这是您想要的结果吗?

Is this result that you want?

这个想法是，当我们第一次放置物品时，我们应该有不同的行为 以及何时在容器中移动.这就是我们一直丢弃数据的原因. 因此，第一次(其他块)，我们克隆对象并将其追加到容器中，然后 设置已经删除为true.此后每次用户移动项目时 我们将进入if条件，并且该项目将不会被克隆，而只会移入容器.

The idea is that we should have different behavior when the item is dropped for the first time and when is moved in the container. This is the reason that we keep alreadydropped in data. So the first time (else block) we clone the object and append to the container and set alreadydropped to true. After this every time when user move the item we will enter into if condition and the item will not be cloned and only moved into contaner.

这篇关于借助jQuery拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！