Question

我正在尝试构建一个拖放系统，可以将图像拖动到特定的div中。因为图像在滚动条中，所以我必须使用克隆作为可拖动的。我遇到的问题是，当我将图像拖到div上时，似乎没有触发'drop'事件。我在网上搜索过，但还没有找到有效的解决方案。

我有以下内容：

$( "#droppable" ).droppable({
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    alert('ok');
  }
});

$( ".draggable" ).draggable({ 
  helper: "clone", 
  scroll: false
});

这样当.dropgable div上的.draggable元素被删除时，我应该看到一个警告。 droppable确实获得了activeClass，所以它已经走得那么远，但是当我放下图像时，没有任何反应 - 它只是消失了。

html是：

对于droppable（它在可滚动的div中，使用jQuery ui可滚动）：

<div class="scrollable" id="scrollable">
  <div id="scrollable-items" class="items">
    <div id="scrollerDiv_1">
      <div>
        <div id="droppable" class="droppable ui-droppable">
          <div class="ImageArea"></div>
          <div class="CaptionArea">Drag a photo or video into the box above to create a new frame</div>
        </div>
      </div>
    </div>
  </div>
</div>

对于可拖动的图像：

<div id="EditMain">
  <div id="libraryMain">
    <div id="my-asset-list" class="assetList">
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
      <div class="listItem draggable scroll-content-item ui-draggable">
        <span class="assetItem">
          <img src="xxx"/>
        </span>
      </div>
    </div>
  </div>
</div>

Answer 1

让它工作 - 感谢您的帮助。

一旦我意识到它正在为其他人工作，我认为它必须与其他东西发生冲突 - 果然，还有另一个'可放置'的脚本，我很久以前就把这个脚本忘记了。删除了，一切正常。

Answer 2

在drop函数中，您需要将删除的项追加到容器中：

drop: function(event, ui) {
    $('#mycontainer').append(ui.draggable);
    return true;
}

返回值表示丢弃是否成功。

Answer 3

对我来说它运作正常.. 做一件事，临时给你的droppable div背景颜色。这样您就可以知道可以放置图像的区域。因为您只能将图像放在已定义为可放置的区域中

Answer 4

这对你有用：

$("#droppable").droppable({
            activeClass: "ui-state-highlight",
            drop: function (event, ui) {
                alert('ok');
                x = $(ui.helper).clone();
                x.appendTo($(this));

            }
        });

Answer 5

有类似的问题与遏制解决方案有关，或者特别是可拖动与droppables的关系。最初尝试过这个没有成功;

drag.getSymbolElement().draggable( {
       containment: 'parent',
       ...

将包含更改为html修复了问题;

drag.getSymbolElement().draggable( {
       containment: 'html',
       ...

注意：解决方案适用于Adobe Edge，如果这是另一个因素。

jQuery ui droppable没有解雇

5 个答案: