距离jQuery UI可拖动对象已被移动,拖动

时间:2013-09-03 17:05:58

标签: javascript jquery jquery-ui jquery-ui-draggable

我使用以下代码允许.dataCard类的所有成员向左或向右拖动,但可以恢复到原来的位置。

$('.dataCard').draggable({ axis: 'x', revert: true });

如何判断物品远离其原始位置的距离?

3 个答案:

答案 0 :(得分:2)

仅跨越一个轴..

drag: function (e, ui){
            y2 = ui.position.top;
            x2 = ui.position.left;
            if(y2>100){alert("greater");}
                    if(y2>100){alert("greater");}

        }

JSFIDDLE DEMO

答案 1 :(得分:1)

您可以使用left CSS属性来确定它在revert事件上的移动距离:

revert: function() {
    alert($(this).css('left'));
    return true;
}

DEMO

答案 2 :(得分:0)

实际数学是三角学,你需要计算距离,即使是对角线。

开始时:

start_position = ui.position;

然后在拖动:在每次鼠标移动中发生,你计算距离

if ( lineDistance( start_position , ui.position ) > 100 ) 
  {
    //do something here
  }

具有魔力的功能是:

function lineDistance( point1, point2)
{
  var xs = 0;
  var ys = 0;

  xs = point2.x - point1.x;
  xs = xs * xs;

  ys = point2.y - point1.y;
  ys = ys * ys;

  return Math.sqrt( xs + ys );
}