1

この質問は以前に何度か尋ねられましたが、答えはありませんでした。私はそれを試してみようと思っていました。

複数の項目で jQuery UI のドラッグ可能 (およびドロップ可能) 関数を使用しています。アイテムをドラッグすると、同じグリッド ラインに整列することはないため、アイテムを並べても意味がありません。

千をレイアウトしようとしました<div class="grid-cell">が、いくつかのドロップ可能なゾーンと css アニメーションを複製すると、いくつかの顕著なパフォーマンスの問題が発生します。

以下は、同じグリッドに並んでいない項目の例です: http://jsfiddle.net/K3zzY/

ここにいくつかの同様の質問があります: jQuery Draggable Custom Snap to Grid jQuery UI Draggable, Snapping to a Grid

提案をありがとう。

また、ドラッグ可能な位置を on:drag で操作しようとしましたが、要素が再配置されないように見えるため、機能していないようです。

ここからコードの提案を使用する私のアプローチ: JQuery/Javascript でグリッドにスナップするドラッグ可能な正方形/長方形

私のコードは次のとおりです。

drag:function(e, ui){
    if(snapToGrid === true){
        ui.position.left = Math.floor((e.pageX - f._wrapper.offset().left) / snapToGridSize) * snapToGridSize,
        ui.position.top = Math.floor((e.pageY - f._wrapper.offset().top) / snapToGridSize) * snapToGridSize
    }
}
4

1 に答える 1

1

問題は、アイテムのサイズの要因ではないサイズにグリッドを設定していることです。これが正しい実装で更新されたフィドルです。

以下の関連コードを繰り返しました。

jQuery

$(".draggable").draggable({
    grid:[20, 20] // 20 and 20 must be factors of the corresponding dimensions on your item
});

CSS

.draggable{
    width:38px; /* Width and Height are both adjusted to account for the border */
    height:38px;
    border: 1px solid black; 
}

グリッド アイテムの重なりを防止したい場合は、グリッド サイズをグリッド アイテム自体のサイズと同じに設定するだけで済みます。これは、両方のソリューションで更新されたフィドルであり、それらを比較できます。

于 2013-07-02T17:33:01.387 に答える