Lưới có thể kéo của jQuery

Question

Có vẻ như tùy chọn 'lưới' trong hàm tạo của Draggable tương đối bị ràng buộc với toạ độ gốc của phần tử đang được kéo - vì vậy chỉ cần đặt, nếu bạn có ba div có thể kéo bằng đầu đặt tương ứng 100, 200, 254 pixel so với bố mẹ:

<div class="parent-div" style="position: relative;"> 
    <div id="div1" class="draggable" style="top: 100px; position: absolute;"></div> 
    <div id="div2" class="draggable" style="top: 200px; position: absolute;"></div> 
    <div id="div3" class="draggable" style="top: 254px; position: absolute;"></div> 
</div> 

ADN tất cả trong số họ đang nhận được kích hoạt cho kéo với 'lưới' thiết lập để [1, 100]:

draggables = $('.draggable'); 
$.each(draggables, function(index, elem) { 
    $(elem).draggable({ 
         containment: $('#parent-div'), 
         opacity: 0.7, 
         revert: 'invalid', 
         revertDuration: 300, 
         grid: [1, 100], 
         refreshPositions: true 
    }); 
}); 

vấn đề ở đây là đó là s khi bạn kéo div3, ví dụ, xuống, nó được tăng lên 100, di chuyển nó lên 354px thay vì chỉ tăng thêm 46px (254 + 46 = 300). dừng trong lưới - 300px, nếu chúng ta đang xem parent-div làm điểm tham chiếu và "bộ giữ lưới".

Tôi đã xem xét các nguồn có thể kéo và dường như là một lỗ hổng trong xây dựng - chúng chỉ thực hiện tất cả các phép tính liên quan đến vị trí ban đầu của phần tử có thể kéo được.

Tôi muốn tránh khỉ vá mã của thư viện có thể kéo và những gì tôi thực sự tìm kiếm ở đây là cách làm cho Draggable tính toán vị trí lưới liên quan đến cha mẹ chứa. Tuy nhiên nếu khỉ vá là không thể tránh khỏi, tôi đoán tôi sẽ phải sống với nó.

Answer 1

tôi xung quanh vấn đề này bằng cách thêm vào kịch bản của riêng tôi để kéo: dưới có thể kéo và đặt nó vào chia Math.floor (x/100) * 100 và tương tự cho Y.

Nếu bạn không suy nghĩ xung quanh trong nguồn xem tại http://labs.pezcuckow.com/solveit/game.html và thực hiện chức năng kéo! (trò chơi không ở gần xong)

bạn cũng sẽ tìm thấy sự cố khi hoàn nguyên, nó không đặt chúng trở lại bị gãy vào lưới. Vì vậy, tôi đã viết của riêng tôi "kiểm tra nếu không hợp lệ" chức năng cuối cùng: của dragabble (một lần nữa có thể xem được trên các trò chơi ở trên).

Answer 2

Tôi đã bắt đầu sử dụng tính năng kéo JQuery trong vài ngày qua và đã tìm thấy cách khắc phục dễ dàng.

Đặt thuộc tính vị trí thành tuyệt đối và thêm tiện ích con của bạn ở trên cùng và bên trái được đặt thành các giá trị xếp hàng vào lưới của bạn.

Khi các giá trị cho trên cùng/bên trái là tuyệt đối, chúng cũng có ý nghĩa hơn khi đi và lưu trữ chúng trong một db.

Answer 3

Kể từ khi câu trả lời @ Pez của bị mất (404), dưới đây là cách tôi đã làm nó:

$('#elem').draggable({ 
    ...., 
    drag: function(e, ui) { 
     ui.position.left = Math.floor(ui.position.left/10) * 10; 
     ui.position.top = Math.floor(ui.position.top/10) * 10; 
    } 
}); 

Demo: http://jsfiddle.net/ThiefMaster/yGsSE/

Answer 4

Jquery Desktop:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script> 
<link rel="stylesheet/less" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css"> 

<div class="parent-div" style="position: relative;"> 
    <div id="div1" class="draggable" style="top: 100px; position: absolute;">1</div> 
    <div id="div2" class="draggable" style="top: 200px; position: absolute;">2</div> 
    <div id="div3" class="draggable" style="top: 254px; position: absolute;">3</div> 
</div> 

<script> 
var Z_INDEX_APP = 0; 
var Z_INDEX_WINDOW_COUNTER = 1; 
var Z_INDEX_NOTE_COUNTER = 999; 
var Z_INDEX_FOR_DRAGGED = 99999; 
var Z_INDEX_FOR_NOTIF = 999999; 
var ICONS_GRID_CELL_SIZE = 75; 
var ICONS_GRID_PADDING_LEFT = 20; 
var ICONS_GRID_PADDING_TOP = 50; 
draggables = $('.draggable'); 
$.each(draggables, function(index, elem) { 
    $(elem).draggable({ 
     containment: $('#parent-div'), 
     start: function(event) { 
     icon = $(this); 
     icon.css('z-Index', Z_INDEX_FOR_DRAGGED); 
     dragStartLeft = icon.css('left'); 
     dragStartTop = icon.css('top'); 
     icon.addClass('desktop-app-dragging'); 
     icon.removeClass('desktop-app-pressed'); 
    }, 
    stop: function(event) {   
     icon.css('z-Index', Z_INDEX_APP); 
     var appId = icon.attr('id').split('_')[1]; 
     icon.removeClass('desktop-app-dragging'); 
     var alignedX = ICONS_GRID_PADDING_LEFT + Math.floor(parseInt(icon.css('left'))/ICONS_GRID_CELL_SIZE) * ICONS_GRID_CELL_SIZE; 
     var alignedY = ICONS_GRID_PADDING_TOP + Math.floor(parseInt(icon.css('top'))/ICONS_GRID_CELL_SIZE) * ICONS_GRID_CELL_SIZE; 
     if (alignedX < ICONS_GRID_PADDING_LEFT) alignedX = ICONS_GRID_PADDING_LEFT; 
     if (alignedY < ICONS_GRID_PADDING_TOP) alignedY = ICONS_GRID_PADDING_TOP;   
     var iconToSwitch = null; 
     $(".desktop-app").each(function(index, app) {   
      if (app.style.top == (alignedY + 'px') && app.style.left == (alignedX + 'px')) { 
       iconToSwitch = app; 
      } 
     }); 
     if (iconToSwitch != null) { 
      var appToSwitchId = iconToSwitch.id.split('_')[1]; 
      var updateUrl = 'api/desktop?cmd=update&id=' + appToSwitchId + '&x=' + parseInt(dragStartLeft) + '&y=' + parseInt(dragStartTop); 
      //$.getJSON(updateUrl); 
      iconToSwitch.style.left = dragStartLeft; 
      iconToSwitch.style.top = dragStartTop; 
     }  
     icon.css('left', alignedX + 'px'); 
     icon.css('top', alignedY + 'px'); 
     var updateUrl = 'api/desktop?cmd=update&id=' + appId + '&x=' + alignedX + '&y=' + alignedY; 
     //$.getJSON(updateUrl); 
    } 

    }); 
}); 
</script>