4

我正在尝试构建一个拖放系统，可以将图像拖放到特定的 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>
4

5 回答 5

2

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

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

于 2012-09-13T13:29:09.923 回答
1

这将为您工作：

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

            }
        });
于 2012-09-13T13:21:18.690 回答
1

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

于 2012-09-13T13:11:26.890 回答
1

在 drop 函数中，您需要将放置的项目附加到容器中：

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

返回值表示drop是否成功。

于 2012-09-13T13:10:44.723 回答
0

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

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

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

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

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

于 2014-09-10T16:28:13.963 回答