jQuery ui droppable 不触发答案

【问题标题】：jQuery ui droppable not firingjQuery ui droppable 不触发
【发布时间】：2012-09-06 13:51:05
【问题描述】：

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

我有以下几点：

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

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

这样当 .draggable 元素被放到#droppable div 上时，我应该会看到一个警报。 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>

【问题讨论】：

@Sharon，似乎还可以：jsfiddle.net/baQL9 您是否将 js 代码放在文档就绪块中，例如$(function(){ ... });?
谢谢。 html 是动态生成的，jquery 在创建后应用。这就是我添加“activeClass:”ui-state-highlight”部分的部分原因，以便我可以看到 jquery 正在被触发。它似乎确实达到了这一点，因为课程添加好了。它似乎并没有触发“drop”部分。

标签： jquery jquery-ui jquery-ui-draggable jquery-tools

【解决方案1】：

得到它的工作 - 感谢您的帮助。

当我意识到它对其他人有用时，我认为它必须与其他东西发生冲突 - 果然，还有另一个“可放置”的脚本，我很久以前就输入了它并忘记了。删除它，一切正常。

【讨论】：

【解决方案2】：

在drop函数中，你需要将被拖放的item追加到容器中：

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

返回值表示drop是否成功。

【讨论】：

谢谢。我试过了，但它没有任何区别。就好像它甚至没有尝试触发“drop”部分。
它一定是页面的另一部分干扰了....我会看看是否还有其他事情会阻止它工作。谢谢。

【解决方案3】：

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

【讨论】：

它已经有了背景色。我可以看到我什么时候结束了，因为“ui-state-highlight”类被附加了。所以我不认为这是问题所在。不过谢谢你的回答。

【解决方案4】：

这对你有用：

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

            }
        });

【讨论】：

谢谢，但还是一无所获！我要去看看，看看是否有其他东西会干扰。

【解决方案5】：

有一个与遏制解决方案有关的类似问题，或者特别是可拖动对象与可放置对象的关系。最初尝试过没有成功；

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

将包含更改为 html 解决了问题；

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

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

【讨论】：