4

ここに私の問題の小さなフィドルがあります:

http://jsfiddle.net/Yc9WY/52/

基本的に、アイテムの 1 つのボックスは、他のボックスよりもはるかに大きくなります。そのため、sortable でのドラッグ アンド ドロップは難しい作業です。

まず、開始時に要素のサイズを変更しました

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
       connectWith: ".connectedSortable",
       start: function(event, ui){
           $(ui.item).width($('#sortable2 li').width());
       }               
    }).disableSelection();
});​

しかし、サイズ変更された要素をマウスのカーソルに移動する方法がわかりませんでした。基本的に、左側のリストの要素の左側から離れた場所をクリックすると、要素を小さいリストにドロップするのが難しくなります。

次を使用して、要素をマウスの位置に移動しようとしていました。

$(ui.item).offset({top: event.pageY, left: event.pageX});

しかし、それはうまくいかなかったようです。

さらなる解明：

(リスト 1) (リスト 2) --------------------------------------------- - --

リスト 1 からリスト 2 への要素の移動は、サイズが異なるため困難です。そのため、リスト 1 の要素のサイズをリスト 2 のサイズに変更しました。今、クリックすると

- - - - - - - - - - - - - - - - - - -バツ - - - -

要素は次のようになります

--- ___ _ __ _ _ __ _ _ __ _ __ × __ --- _ _

ここで、x はマウスの位置を示します。基本的に、リスト2へのドラッグを簡単にするために、要素をマウスの位置に移動したい

何か提案はありますか？ありがとう！

編集：申し訳ありませんが、画像を投稿するのに十分な担当者がいませんが...

[ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _] (クリック前)

[ _ _] -------------------- x (クリックの位置をマークする x でクリック)

私は基本的に、今では小さくなった要素をマウスと同じ位置に移動したいと考えています。

再度、感謝します！

4

2 に答える 2

7

tolerance:"pointer",sortable 要素のオプションを追加する

ここにフィドルがあります：http://jsfiddle.net/Yc9WY/55/

編集 ：

cursorAt: { top:0, left: 0 },sortable 要素のオプションにADD

ポインターの下にアイテムが配置されます

ここにフィドルがあります：http://jsfiddle.net/Yc9WY/57/

于 2012-06-18T15:39:41.353 に答える
2

完全に機能するこのソリューションを見つけました：

$("ul.sortable").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
       // Resize elements
       $(this).sortable('refreshPositions');
    }
});

ソース: http://forum.jquery.com/topic/reducing-the-size-of-elements-before-sorting-them-using-sortable

于 2013-05-09T03:54:15.800 に答える