Jquery 드래그 가능 스냅을 가장 바깥 쪽 요소에만 적용

Question

각 열에 숫자가 할당 된 격자를 만들었습니다. draggable div를 각 열의 경계에 맞추기 위해 기본적으로 div가 찍은 가장 바깥 쪽 열의 범위를 표시하고 싶습니다.

예는 여기에 있습니다 :이 질문에서 촬영 https://jsfiddle.net/Cataras/dpdLLcft/

$(function() { 
    $(".draggable").draggable({ 
    snap: ".hour-full, .hour-half", 
    snapMode: 'both', 
    stop: function(event, ui) { 
     /* Get the possible snap targets: */ 
     var snapped = $(this).data('ui-draggable').snapElements; 

     /* Pull out only the snap targets that are "snapping": */ 
     var snappedTo = $.map(snapped, function(element) { 
     return element.snapping ? element.item : null; 
     }); 
     /* Display the results: */ 
     var result = ''; 
     $.each(snappedTo, function(idx, item) { 
     result += $(item).text() + ", "; 
     }); 

     $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result)); 
    } 
    }); 
}); 

코드 : 그러나 How to find out about the "snapped to" element for jQuery UI draggable elements on snap

, 또한에만 열 왼쪽에 번호와 사업부의 오른쪽하지만 표시되지 않습니다 그 사이에있는 모든 열. 그리고 때로는 빨간색 막대가 분명히 만지지도 않는 오른쪽 옆의 것들도 있습니다. 어떤 제안?

Answer 1

snappedTo 배열은 약간 욕심이 많으므로 left 위치 지정을 사용하여 드래그 한 항목이 본질적으로 over 인 요소를 확인합니다. https://jsfiddle.net/Twisty/dpdLLcft/5/

jQuery를

$(function() { 
    $(".draggable").draggable({ 
    snap: ".hour-full, .hour-half", 
    snapMode: 'both', 
    stop: function(event, ui) { 
     console.log("Drag stopped at Left: " + ui.offset.left); 
     /* Get the possible snap targets: */ 
     var snapped = $(this).data('ui-draggable').snapElements; 
     console.log($(this).data('ui-draggable')); 

     /* Pull out only the snap targets that are "snapping": */ 
     var snappedTo = $.map(snapped, function(element) { 
     if (element.snapping) { 
      console.log("Found snapped element: " + $(element.item).text() + ". Left: " + element.left + " Width: " + element.width); 
      return element; 
     } 
     }); 
     /* Display the results: */ 
     var result = ''; 
     $.each(snappedTo, function(idx, item) { 
     if (ui.offset.left == item.left) { 
      console.log(item); 
      result = $(item.item).text() + ", "; 
      result += $(snappedTo[idx + 3].item).text(); 
     } 
     }); 

     $("#results").html("Snapped to: " + (result === '' ? "Nothing!" : result)); 
    } 
    }); 
}); 

먼저, 루프를 사용, 난 그냥 true으로 snapping했다 요소의 모든 데이터를 잡고 다음은

은 작업 예입니다.

둘째로, 우리는 이들을 반복하여 드래그 가능한 요소의 왼쪽 가장자리를 다양한 요소와 비교합니다. 콘솔에 다음과 같이 표시됩니다.

Drag stopped at Left: 48 
Found snapped element. Left: 28 Width: 20 
Found snapped element. Left: 48 Width: 20 
Found snapped element. Left: 68 Width: 20 
Found snapped element. Left: 88 Width: 20 
Found snapped element. Left: 108 Width: 20 
Found snapped element. Left: 128 Width: 20 

다음을 비교하여 시작 요소를 결정할 수 있습니다.

if (ui.offset.left == item.left) 

오프셋 (offset) 왼쪽 (48)과 요소의 왼쪽 48 (48 == 48)이다 , 우리는 다음 결과 업데이트 : 우리가 알고 있기 때문에

result = item.item.innerHTML + ", "; 
result += snappedTo[idx + 3].item.innerHTML; 

을 그 열을 드래그 할 수있는 커버의 수, 우리는 시작을 알기 때문에 색인을 증가시킴으로써 다른 요소로부터 정보를 얻습니다.

Snapped to: 2, 5 

나는 이것이 귀하의 설명에서 성취하려고했던 것이라고 생각합니다. 바깥 쪽을 얻으려면 간단히 색인을 조정하십시오.

result = snappedTo[idx - 1].item.innerHTML + ", "; 
result += snappedTo[idx + 4].item.innerHTML; 

원하는 방식으로 원하는 결과를 얻을 수 있습니다. 질문이 있으면 알려주세요.