distance jQuery UI 드래그 가능한 객체가 이동되고 드래그되었습니다.

Question

다음 코드를 사용하여 .dataCard 클래스의 모든 멤버가 왼쪽 또는 오른쪽으로 드래그 가능하지만 원래 위치로 되돌릴 수 있습니다.

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

어떻게 항목이 떨어져 원래의 위치로부터의 거리를 알 수 있습니까?

Answer 1

은 .. 하나 개의 축에 걸쳐 그것을 만든 적이

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

     } 

JSFIDDLE DEMO

Answer 2

당신은 그것이 revert 이벤트를 이동하는 방법까지 결정하기 위해 left CSS 속성을 사용할 수 있습니다

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

DEMO

Answer 3

실제 수학은 삼각법이며, 대각선 일지라도 거리를 계산해야합니다. 시작에

는 :

는

start_position = ui.position; 

드래그 :

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); 
} 

: 모든 마우스 이동으로 발생, 당신은 계산

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

마법을 수행하는 기능과 같은 거리가 이것이다