5

ドラッグ可能なオブジェクトを遠くから互いに整列させようとしています。ほとんど完了しましたが、うまくいかないのは、この例を注意深く見ると、ヘルパーが 1 移動遅れていることです。1 ピクセル上に移動すると、ヘルパーは以前の -1 の場所に移動します。マウスがあった場所に移動します:(

あなたが理解していることを願っています。

何が問題なのですか？

問題はこの部分にあると思いますが、このバグなしで機能するように何を変更すればよいかわかりません:

drag: function(event, ui) { drawGuideLines($(this)); },
        start: function(event, ui) { removeAlignLines($(this)); },
        stop: function(event, ui) {
                rebuildAlignLines($(this));
                linesTimeout = setTimeout("hideGuideLines()", 100);
            },
4

1 に答える 1

2

バグのように聞こえますが、ドラッグ イベントは最後の移動後に呼び出されません。ユーザーがマウスをすばやく動かすと、問題が非常に顕著になります。

回避策として、ドラッグ中に間隔関数を設定し、100ms ごとにグリッド線を描画することができます。

jsbin の更新 : http://jsbin.com/oqohuq/4/edit

var handleInterval = null;
$(".draggable").draggable({
    opacity : 0.35,
    handler : "._header",
    stack : ".draggable",
    grid: [1, 1],
    refreshPositions: true,
    snap: ".drag_alignLines", // Setting snap to alignment lines
    snapTolerance: 10,
    snapMode: "inner",
    drag: function(event, ui) { drawGuideLines($(this)); },
    start: function(event, ui) {
      //Init the interval here
      var self = $(this);
      handleInterval = setInterval(function(){ drawGuideLines(self);},100);
      removeAlignLines($(this)); },
    stop: function(event, ui) {
      //Clear interval here
      clearInterval(handleInterval);
      rebuildAlignLines($(this));
      linesTimeout = setTimeout("hideGuideLines()", 100);
     }//Don't forget to remove the last coma!            
});
于 2012-12-24T17:57:04.780 に答える