0

クライアントのドラッグ アンド ドロップ ナビゲーションのセットアップに取り組んでいます。

ドラッグ アンド ドロップは (基本的な形式で) 機能していますが、ドラッグするリスト項目の 1 つをクリックすると、実際のドロップ可能なボックスが別の場所に表示されます。

何かを見せずに説明するのは難しいので、ここでオンラインにしています：http://jsfiddle.net/elogicmedia/nVPYQ/7/

LI および A タグの CSS

li {
color: black;
list-style: none;
padding: 1em 1em;
}
a {
position: absolute;
text-decoration: none;
border: 0px solid black;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
    font-family: helvetica, arial;
    background-color: #C0D9D9;
}

JS のドラッグ アンド ドロップ可能なコード

// let the gallery items be draggable
$( "li" ).draggable({
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});  

// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
  accept: "ul.gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
      alert('dropped');
    //deleteImage( ui.draggable );
  }
});

また、フィドルの右側の境界線に注意してください。何かが間違いなくそこにもありません。それらはそこにあるべきではなく、円だけです。以下のjsfiddleセットアップのスクリーンショット。

ありがとうございました

ここに画像の説明を入力

4

1 に答える 1

0

私はこれを自分で解決することになりました。

作業結果は次のとおりです。

http://jsfiddle.net/elogicmedia/nVPYQ/12/

LI タグを削除しようとしましたが、A タグは円で、右側のボックスは LI タグでした。

新しいドラッグ アンド ドロップ コード

// let the gallery items be draggable
$( "ul.gallery > li a" ).draggable({
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});  

// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
  accept: "ul.gallery > li a",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
      alert('dropped');
    //deleteImage( ui.draggable );
  }
});
于 2013-05-09T21:56:39.500 に答える