jQuery上の要素位置とマウスでの不思議な振る舞いソート可能とブートストラップ

私はこれに対する答えを探していましたが、まだ見つけていません。jQuery上の要素位置とマウスでの不思議な振る舞いソート可能とブートストラップ

私はブートストラップとjQueryのソート可能なシステムを持っていますが、要素をあるリストから別のリストに移動すると、その要素はマウスカーソルよりも遅く動くようなものです。カーソルと要素の間に隙間ができて、他のリストに移動すると、マウスが近くにあってプレースホルダの正確な位置にないときにプレースホルダが表示され、その要素は数ピクセル後に表示されます。

私は簡単な例でビデオを作りました https://youtu.be/MhxAhIDUj3Y

この詳細については私はLI要素の内部にブートストラップパネルを使用していますが、マークアップはliですkeが

<li class="ui-sortable-handle" style="display: list-item;">  
    <div class="panel panel-default span4"> 
    </div> 
</li>

私はソート可能に使用するオプションがあります。この本

placeholder: 'ui-sortable-placeholder', 
    connectWith: ".connectedSortable", 
    helper: 'clone', 
    scroll: false, 
    start: function(e, ui){ 
     ui.placeholder.height(ui.item.height()); 
    }

カーソルと要素間のこの奇妙なマウスギャップを取得するために何が起こっているか知っていますか？

はここで任意の助けが本当に理解されるであろう行動に https://jsfiddle.net/3jj6k7bm/

を再現する作業フィドルだ、あなたは80％に<body>セットにzoomを持つことによって引き起こされています

出典

2017-01-13 Juanchi

これを再現するのに必要なすべての関連コードを提供できますか？あなたがデモを行うことができれば素晴らしいことでしょう。 –

これはあなたが使っているものですか？ https://jqueryui.com/sortable/ –

はい、jquery sortableを使用しています。ここでは動作例があります。https://jsfiddle.net/3jj6k7bm/ – Juanchi

に感謝します。要素は実際にはカーソルと同じくらい動いていますが、<body>がズームアウトされているため、動きが少なくなっているようです。これをさらに証明するために、別のフィドルをbody{zoom: 180%;}としました：https://jsfiddle.net/3jj6k7bm/2/これは逆です：要素がカーソルよりも速く動いているようです。

ズームを100％に変更してください。固定してください。

出典

2017-01-14 14:36:26

ありがとうEmilio、あなたの提案は私の問題を解決しました！しかし、今私は考えて、なぜ私は体にズームを使用することはできません、多分それは並べ替えのバグですか？またはその設計によってソート可能なときには設定できない – Juanchi

@Juanchi私は問題は、ドラッグ可能な動作を含むすべてのjQuery UI関数（.draggable（）自身を含む）がドラッグ中に要素の位置を基準にしている実際のカーソルの位置ではなく、カーソルが開始位置に対してどのくらい移動したかを示します。それは説明するのは難しいですが、あなたがそれを考えるならちょっと意味があります –

とにかく、[ここにある]（http://stackoverflow.com/questions/8605439/jquery-draggable-div-with-zoom/8605589）素晴らしい回想現在のズームに関係なく '.draggable（）'関数を動作させるには、おそらく '.sortable（） 'を使うことができます –

jQuery上の要素位置とマウスでの不思議な振る舞いソート可能とブートストラップ

答えて

関連する問題