Jquery ui 可拖动无法在“appendTo”定义的元素中删除?

发布于 2024-11-27 11:39:22 字数 1325 浏览 2 评论 0原文

我在容器中有一些图像,它们都是可拖动的,并且下面有一些带有“容器”类的可放置容器。

可拖动对象已将“snap”定义为“.container”。

问题是,如果可拖动对象“捕捉”到容器,则它永远不会掉落,如果我删除“捕捉”属性,问题就解决了,但我真的很想在它们掉落之前捕捉可拖动对象

左边的图像不掉落(被捕捉),右边的图像掉落 ok

左边的图像不掉落(被捕捉)快照),右侧的图像下降正常。

我很感激任何想法

代码:

--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

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜吻♂芭芘 2024-12-04 11:39:23

您尝试过添加该属性吗?

            connectToSortable: ".imageList",

这里有一些很好的例子: http://jqueryui.com/demos/draggable/#sortable

have you tried adding the property?

            connectToSortable: ".imageList",

There are some good examples here: http://jqueryui.com/demos/draggable/#sortable

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文