0

クローンを作成してdivにドロップしたいドラッグ可能な画像がいくつかあり、ドロップ後に新しいクローンを再配置して追加するオプションがあります。このウェブサイトを見回した後、次のコードに絞り込みました。

function init() {

$("#bin").droppable({
  accept: '.symbol',
  drop: function(event, ui) {
      $(this).append($(ui.helper).clone());
      $("#bin .symbol").addClass("item");
      $(".item").removeClass("ui-draggable symbol");
      $(".item").draggable();
  }
}); 
$(".symbol").draggable({
  helper: 'clone',
  grid: [20, 50]
});
}

これは機能しているように見えましたが、クローンをドラッグしている間、ドロップ可能な div の上にさえ表示されません (ページには表示されますが、ドロップ可能の下に「滑り込む」ように見えます)。誰かが何が悪いのか教えてもらえますか?

HTML:

<div class="symbolSource">
<img src="pics/sun.png" alt="Bliss for 'sun'" class="symbol" />
<img src="pics/colour.png" alt="Bliss for 'colour'" class="symbol"  />
<img src="pics/tree.png" alt="Bliss for 'tree'" class="symbol" />
</div>
<div id="bin" ></div>

CSS:

.symbolSource {
    padding: 0px 0;    
    margin: 20px;
    width: 100%;
    height: 150px;
    float: left;
    overflow: scroll;
}

#bin {
  background: #eee;
  height: 300px;
  width: 100%;
  position: relative;
  margin-top: 220px;
}

編集: クローンは消えなくなりましたが、div はまだそれを受け入れません。

4

2 に答える 2

0

との z インデックスをチェック#binします.symbol。の z インデックスは#bin、 の z インデックスよりも低くなければなりません.symbol

于 2012-06-13T14:27:32.837 に答える