jQuery - 多个重叠的 Droppables 导致不可预测的丢弃

发布于 2024-09-30 19:16:42 字数 957 浏览 5 评论 0原文

我有一个可拖动对象，它被放置在重叠的可放置对象的等距网格上。可放置的内容是灰色图块、img 标签，看起来像附加的第一张图像。当可拖动对象位于其上方时，它们被设置为突出显示蓝色。

以下是可放置的源代码：

        $(".sprite").droppable({
            drop: function(event,ui) {
                object_id = ui.draggable.attr("id").replace("sprite_","");
                set_action('move_object',$(this).attr("id"));
                set_target(object_id);
                ui.draggable.removeClass("holding");
            },
            over: function(event, ui) {
                $(this).attr("src",$(this).attr("src").replace('.png','-hover-blue.png'));
            },
            out: function(event, ui) {
                $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png'));
            },
            tolerance: 'pointer'
        });

基本上，我希望 a) 一次突出显示一个图块，b) 让突出显示的图块成为对象被放置在其上的图块。

我尝试过各种宽容，但都无济于事。

图片：

i.imgur.com/dGx9X.png

和

i.imgur.com/vb1d9.png

原文

I have a draggable that is being dropped on an isometric grid of droppables that overlap. The droppables are the grey tiles, img tags, and look like the first image attached. They are set to highlight blue when a draggable is over them.

Here is the source code for the droppable:

        $(".sprite").droppable({
            drop: function(event,ui) {
                object_id = ui.draggable.attr("id").replace("sprite_","");
                set_action('move_object',$(this).attr("id"));
                set_target(object_id);
                ui.draggable.removeClass("holding");
            },
            over: function(event, ui) {
                $(this).attr("src",$(this).attr("src").replace('.png','-hover-blue.png'));
            },
            out: function(event, ui) {
                $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png'));
            },
            tolerance: 'pointer'
        });

Basically I'd like to have a) one tile highlight at a time, and b) have the highlighted tile be the one the object is dropped on.

I've tried every type of tolerance to no avail.

Images:

i.imgur.com/dGx9X.png

and

i.imgur.com/vb1d9.png

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

神爱温柔 2024-10-07 19:16:42

当 drabbable 移动到 droppable 上方时，您应该停用所有其他 droppable 并激活当前的 droppable。然后很容易让活动的可放置对象产生放置效果。

在 over 函数中

$(".sprite").not($(this)).removeClass("over")
   .each(function(){
     $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png'));
   });
$(this).addClass("over");

，然后在 drop 中将 $(this) 替换为 $(".over")

When the drabbable move over a droppable you should deactivate all the other droppables and activate the current droppable. Then it's simple to have the drop effect the active droppable.

in the over function

$(".sprite").not($(this)).removeClass("over")
   .each(function(){
     $(this).attr("src",$(this).attr("src").replace('-hover-blue.png','.png'));
   });
$(this).addClass("over");

then in drop replace $(this) with $(".over")

回复收藏 0 原文

~没有更多了~