jQuery ドラッグ アンド ドロップ可能を使用して、タイルのリストと、任意のタイルにドロップできるドラッグ可能ウィジェットを作成しています。
各タイルには境界線がありますが、ウィジェットにはありません。両方とも同じサイズですが、ウィジェットをタイルにドロップすると、タイルの境界線の左下にスナップします。したがって、タイルの上部に 2 つのピクセルのスペアがあります。
ここにフィドルがあります http://jsfiddle.net/gztQM/
そしていくつかのコード:
div[id^="row"] {float:left; width:65px; height:65px; margin:5px;border:1px solid #454545; background-color:#262e41;}
.bookmark {float:left; width:65px; height:65px; background-color:#edff57;cursor: move;display:block; margin:-1px 0px 0px -1px;}
.bookmark.ui-draggable-dragging {-moz-box-shadow: 0 0 5px #d9d9d9; -webkit-box-shadow: 0 0 5px #d9d9d9; box-shadow: 0 0 5px #d9d9d9;}
ドロップ可能な領域 (タイル) の例を次に示します。
<div class="position" id="row-2col-1"></div>
ドラッグ可能なリンク
<a href class="bookmark"></a>
JS
$('.bookmark').draggable({containment: '#content', snap:'.position', snapMode:'inner', revert:'invalid',snapTolerance: 32});
$('.position').droppable({drop: handleDropEvent, accept:'.bookmark'});
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
}
境界線の内側にスナップするにはどうすればよいですか? マージンとパディングを追加しようとしましたが、役に立ちませんでした。jqueryサイトでもこれについて言及しているものは何もありません
ヘルプ！:)