用拖放的turn.js滴两次图像

I have the following code which I am using with turn.js and works well except for the 13th page - when I drop an image onto page 11 the same image appears on page 13 (which is directly behind page 11 on the screen).

我有以下代码,我正在使用turn.js并且除了第13页之外效果很好 - 当我将图像放到第11页时,相同的图像出现在第13页(直接在屏幕的第11页后面)。

<div class="page"><img src="<?=$book;?>/front.jpg" alt="" /><span class="front"></div>
<div class="page"><img src="<?=$book;?>/blank.jpg" alt="" /></div>  
<div class="page"><img src="<?=$book;?>/dedication.jpg" alt="" /></div>
<div class="page drop" id="drop4"><img src="<?=$book;?>/drag4.jpg" alt="" /></div>
<div class="page" id="page5"></div>
<div class="page drop" id="drop6"><img src="<?=$book;?>/drag6.jpg" alt="" /></div>
<div class="page drop" id="drop7"><img src="<?=$book;?>/drag7.jpg" alt="" /></div>
<div class="page drop" id="drop8"><img src="<?=$book;?>/drag8.jpg" alt="" /></div>
<div class="page" id="page9"><img src="<?=$book;?>/9.jpg" alt="" /></div>
<div class="page drop" id="drop10"><img src="<?=$book;?>/drag10.jpg" alt="" /></div>
<div class="page drop" id="drop11"><img src="<?=$book;?>/drag11.jpg" alt="" /></div>
<div class="page drop" id="drop12"><img src="<?=$book;?>/drag12.jpg" alt="" /></div>
<div class="page drop" id="drop13"><img src="<?=$book;?>/drag13.jpg" alt="" /></div>
<div class="page drop" id="drop14"><img src="<?=$book;?>/drag14.jpg" alt="" /></div>
<div class="page" id="page15"><img src="<?=$book;?>/15.jpg" alt="" /></div>
<div class="page drop" id="drop16"><img src="<?=$book;?>/drag16.jpg" alt="" /></div>
<div class="page" id="page17"><img src="<?=$book;?>/17.jpg" alt="" /></div>
<div class="page" id="page18"><img src="<?=$book;?>/18.jpg" alt="" /></div>
<div class="page"><img src="<?=$book;?>/blank.jpg" alt="" /></div>
<div class="page"><img src="<?=$book;?>/back.jpg" alt="" /></div>

<img class="drag" src="<?=$book;?>/4.jpg" alt="" />
<img class="drag" src="<?=$book;?>/6.jpg" alt="" /><br />
<img class="drag" src="<?=$book;?>/7.jpg" alt="" />
<img class="drag" src="<?=$book;?>/8.jpg" alt="" /><br />
<img class="drag" src="<?=$book;?>/10.jpg" alt="" />
<img class="drag" src="<?=$book;?>/11.jpg" alt="" /><br />
<img class="drag" src="<?=$book;?>/12.jpg" alt="" />
<img class="drag" src="<?=$book;?>/13.jpg" alt="" /><br />
<img class="drag" src="<?=$book;?>/14.jpg" alt="" />
<img class="drag" src="<?=$book;?>/16.jpg" alt="" /><br />

so the following code gets executed twice when there is a droppable area directly below the one being dropped onto.

因此,当一个可放置区域直接位于被放置的区域下方时,以下代码将被执行两次。

$( ".drag" ).draggable({
    drag: function(event,ui){
        $this = $(this);
        $('.drop').droppable({
        drop: function(event,ui){
        var src = $this.attr('src');
        $this.hide();
        $(this).html('<img src="'+src+'" style="width:100%;">');
      }
    });
  }
});

My question is (and I hope I have given sufficient information) how to prevent page 13 from inheriting the contents of page 11? Incidentally, this happens still even of I drop an image onto 13 first - it will still inherit what I drop onto page 11.

我的问题是(我希望我已经提供了足够的信息)如何阻止第13页继承第11页的内容?顺便说一句,即使我首先将图像放到13上,这仍然会发生 - 它仍然会继承我在第11页上的内容。

Thanks for any ideas!

谢谢你的任何想法!

I just noticed that this behavior happens anytime an image is dropped onto a droppable region that is directly on top of another droppable region.

我只是注意到,只要将图像拖放到直接位于另一个可放置区域之上的可放置区域,就会发生此行为。

here's a fiddle: http://jsfiddle.net/e2p6xydg/14/ < might need to check jquery ui checkbox

这是一个小提琴:http://jsfiddle.net/e2p6xydg/14/ <可能需要检查jquery ui复选框< p>

1 个解决方案

#1

got an answer compiled from the internet - thanks to a friend of mine:

从互联网上得到了答案 - 感谢我的一位朋友:

$(".drag").draggable({
drag: function (event, ui) {


},
start: function (event, ui) {
    $('.drop').droppable({
        drop: function (event, ui) {
            var droppable = $(this);
            ui.helper.css({ pointerEvents: 'none' });
            var onto = document.elementFromPoint(event.clientX, event.clientY);
            ui.helper.css({ pointerEvents: '' });
            if (!droppable.is(onto) && droppable.has(onto).length === 0) {
                return;
            }

            $this = $(this);
            $this.find('img').attr('src', ui.draggable[0].src);
            $(ui.draggable[0]).hide();
        }
    });
}
});