Jquery ui 可拖动无法在“appendTo”定义的元素中删除?
我在容器中有一些图像,它们都是可拖动的,并且下面有一些带有“容器”类的可放置容器。
可拖动对象已将“snap”定义为“.container”。
问题是,如果可拖动对象“捕捉”到容器,则它永远不会掉落,如果我删除“捕捉”属性,问题就解决了,但我真的很想在它们掉落之前捕捉可拖动对象
左边的图像不掉落(被捕捉)快照),右侧的图像下降正常。
我很感激任何想法
代码:
--draggable
$('#' + this.Id + ' .imageList li img').draggable({ scroll: true, helper: 'clone', revert: 'invalid', snap: '.dropHere, .dropHereReassign', appendTo: 'body', revertDuration: 200, snapMode: 'inner');
--droppable
var that = this;
$('#' + this.Id + ' .imageList img.dropHere').droppable({ drop: function (event, ui) {
$(that).attr('src', ui.draggable.attr('src'));
$(that).removeClass('dropHereReassign');
$(that).droppable({ disabled: true }); } });
HTML:
<div id="imagesContainer">
<ul class="imageList">
<li><img id="photo-1" src="/someImage.jpg" /></li>
</ul>
</div>
<div id="dropImagesContainer" class="photoSection">
<ul class="imageList">
<li><img src="/00/06/12/00061275_in.png"><span class="description"></span></li>
<li><img src="/dropHere.jpg"><span class="description"></span></li>
</ul>
</div>
I have some images in a container, they're all draggable, and bellow there's some droppable containers with the class "container".
The draggable have defined "snap" to ".container".
The problem is that the draggable never drops if its "snapped" to the container, if I remove the "snap" property the problem is solved but I'd really like to snap the draggables, before they drop
The image on the left doesn't drop (is snapped), the image on the right drops ok.
I'd appreciate any idea
CODE:
--draggable
$('#' + this.Id + ' .imageList li img').draggable({ scroll: true, helper: 'clone', revert: 'invalid', snap: '.dropHere, .dropHereReassign', appendTo: 'body', revertDuration: 200, snapMode: 'inner');
--droppable
var that = this;
$('#' + this.Id + ' .imageList img.dropHere').droppable({ drop: function (event, ui) {
$(that).attr('src', ui.draggable.attr('src'));
$(that).removeClass('dropHereReassign');
$(that).droppable({ disabled: true }); } });
HTML:
<div id="imagesContainer">
<ul class="imageList">
<li><img id="photo-1" src="/someImage.jpg" /></li>
</ul>
</div>
<div id="dropImagesContainer" class="photoSection">
<ul class="imageList">
<li><img src="/00/06/12/00061275_in.png"><span class="description"></span></li>
<li><img src="/dropHere.jpg"><span class="description"></span></li>
</ul>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您尝试过添加该属性吗?
这里有一些很好的例子: http://jqueryui.com/demos/draggable/#sortable
have you tried adding the property?
There are some good examples here: http://jqueryui.com/demos/draggable/#sortable