jQuery 드래그 가능한 맞춤형 맞춤 격자로

저는 프로젝트에서 jQuery UI Draggable을 사용하고 있습니다. 드래그 가능한 객체에 그리드 (10x10 격자) 옵션을 토글하는 체크 박스가 있습니다.jQuery 드래그 가능한 맞춤형 맞춤 격자로

그러나 그리드가 다시 켜지면 그리드가 꺼져있을 때 움직이는 개체는 그리드가 꺼져있을 때 움직이지 않은 개체와 정렬되지 않습니다. 간단히 말해, 객체는 정렬되지 않은 별도의 격자에 있습니다.

그래서 오브젝트가 그리드가 켜져있을 때 항상 정렬되도록 오브젝트가 10 단위로 스냅되고 싶습니다 (사용자가 스냅을 놓을 때뿐만 아니라 드래그하는 동안). jQuery UI에서이를 구현하는 방법을 알아내는 것 같다. 어떤 아이디어?

출처

2012-06-19 penguinrob

여기에 같은 problem- 솔루션했다 : http://stackoverflow.com/a/20712561/165673 – Yarin

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    #draggable { width: 100px; height: 70px; background: silver; } 
    </style> 
    <script> 
    $(document).ready(function() { 
// $("#draggable").draggable({ grid: [10, 10] }); 
$("#draggable").draggable(); 
$("#draggable").draggable({ 
    stop: function(event, ui) { 
    var left = ui.position.left; 
    var top = ui.position.top; 

    left = left - left % 10; 
    top = top - top % 10; 
$("#draggable").offset({left:left,top:top}); 
console.log($("#draggable").position()); 
} 
}); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="draggable">Drag me</div> 

</body>

출처

2012-06-19 04:44:23 user993553

발표 할 때 그리드에 스냅 작동,하지만 난 그것을 사용자 정의에 스냅이하는 것을 선호 그리드를 그리는 동안 사용자가 여전히 객체를 드래그하고 있는데, 이는 구현 방법을 모르는 것입니다. – penguinrob

jQuery 드래그 가능한 맞춤형 맞춤 격자로

답변

관련 문제