我正在尝试构建一个拖放系统,可以将图像拖动到特定的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>
答案 0 :(得分:2)
让它工作 - 感谢您的帮助。
一旦我意识到它正在为其他人工作,我认为它必须与其他东西发生冲突 - 果然,还有另一个'可放置'的脚本,我很久以前就把这个脚本忘记了。删除了,一切正常。
答案 1 :(得分:1)
drop: function(event, ui) {
$('#mycontainer').append(ui.draggable);
return true;
}
返回值表示丢弃是否成功。
答案 2 :(得分:1)
对我来说它运作正常.. 做一件事,临时给你的droppable div背景颜色。 这样您就可以知道可以放置图像的区域。因为您只能将图像放在已定义为可放置的区域中
答案 3 :(得分:1)
这对你有用:
$("#droppable").droppable({
activeClass: "ui-state-highlight",
drop: function (event, ui) {
alert('ok');
x = $(ui.helper).clone();
x.appendTo($(this));
}
});
答案 4 :(得分:0)
有类似的问题与遏制解决方案有关,或者特别是可拖动与droppables的关系。最初尝试过这个没有成功;
drag.getSymbolElement().draggable( {
containment: 'parent',
...
将包含更改为html修复了问题;
drag.getSymbolElement().draggable( {
containment: 'html',
...
注意:解决方案适用于Adobe Edge,如果这是另一个因素。