0

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

そのため、ドロップされる領域のすぐ下にドロップ可能な領域がある場合、次のコードが 2 回実行されます。 

$( ".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%;">');
      }
    });
  }
});

私の質問は、13 ページが 11 ページの内容を継承しないようにする方法です (十分な情報を提供できれば幸いです)。ちなみに、これは最初に 13 に画像をドロップした場合でも発生します。11 ページにドロップしたものは引き続き継承されます。

アイデアをありがとう！

別のドロップ可能な領域の真上にあるドロップ可能な領域に画像がドロップされるたびに、この動作が発生することに気付きました。

ここにフィドルがあります： http://jsfiddle.net/e2p6xydg/14/ <jquery uiチェックボックスをチェックする必要があるかもしれません

4

1 に答える 1

0

インターネットからコンパイルされた回答を得ました-私の友人のおかげです：

$(".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();
        }
    });
}
});
于 2015-05-09T20:33:41.520 に答える