jQuery UI 드래그 가능 처음 지점으로 돌아 가지 않음

Question

jQuery UI draggable 요소가 있습니다. 매우 간단합니다. 그것은 다른 div (draggable piece)가 격자로 설정된 div (컨테이너) 일뿐입니다. 문제는 요소를 한 번 이동 한 후에 첫 번째 지점으로 돌아갈 수 없다는 것입니다. 나는 그것이 작동하는 격자 크기를 변경할 수 있지만, 아래 그것을

관련 JS 몇 가지 요소를 일치하는 것 같이 나는이 그리드에서 작업해야하는 경우 :

$('<div class="slider_wrap"><div class="slider"></div></div>').appendTo('#chart'); 

$('#chart .slider') 
    .draggable({ 
     containment:'parent', 
     grid:[distanceBetweenPoints,0], 
     opacity: 0.25 
    }) 
    .bind('mousedown', function(e, ui){ 
     // bring target to front 
     $(e.target.parentElement).append(e.target); 
    }) 
    .bind('drag', function(e, ui){ 
     // update coordinates manually, since top/left style props don't work on SVG 
     e.target.setAttribute('x', ui.position.left); 
    }) 
    .bind('dragstop',function(e, ui){ 
     //a = true offset of slider piece 
     var a = ui.position.left + distanceBetweenPoints; 
     var b = containerWidth; 
     var c = thePoints.length; 
     var d = b/c; 
     var x = a/d; 
     //Since the points are in an array which starts at 0, not 1, we -1 from the currentPoint 
     console.log(x) 
     var currentPoint = Math.round(x)-1; 
     thisPointIndex = currentPoint; 
     chart.series[0].data[currentPoint].select(true); 
    }); 

어떤 아이디어?

예 : http://jsbin.com/ucebar

Answer 1

예를 들어, 39.7 px와 같이 분수 격자 크기를 사용하고 있습니다. 따라서 각 드래그에서 div는 픽셀을 왼쪽으로 오프셋시킵니다. 즉, 위치 0은 빨리 사용할 수 없게됩니다.

즉, 포인트 1에서 ui.position.left은 38 픽셀 이하가됩니다.
최소 점프 (39.7px)를 점 0으로 이동하면 경계 사각형 밖에서 div가 이동하므로 이동이 허용되지 않습니다.

그리드 크기에 가장 가까운 정수를 사용하면 신속하게 그리드와 데이터 포인트 간의 정렬이 잘못됩니다.

1. 가 grid:[distanceBetweenPoints,0], 매개 변수를 삭제

   한 가지 방법은 주변이 모든이다. 대신

2. , 그래서 같이 드래그 stop에 사업부를 스냅 :

   /*--- Snap to nearest grid. 
   */ 
   var gridPos  = Math.round ( 
           Math.round (ui.position.left/distanceBetweenPoints) 
           * distanceBetweenPoints 
          ); 
   var delta  = gridPos - ui.position.left; 
   var newOffset = $(this).offset().left + delta; 
   $(this).offset ({left: newOffset}); 
   

See it in action at jsBin.

Answer 2

내가 진짜 해결책을 운동 할 시간이 didnt는하지만, 내가 발견 드래그 앤 왼쪽마다 약간 더 슬라이더의 움직임을 드롭합니다. 첫 번째 장소로 돌아갈 수없는 이유는 첫 번째 드롭 이후 더 이상 충분한 공간이 없다는 것입니다. 행운을 빕니다!

Answer 3

내가 다음에 그것을 해결할 수 있었다 :

.draggable({ 
    ... 
    drag : function(event, ui) { 
    ui.position.left = Math.round(ui.position.left/distance_between_points) * distance_between_points; 
    } 
});