jQuery的可拖動網格

它看起來像在Draggable構造函數中的「網格」選項相對綁定到元素的原始座標被拖動 - 所以簡單地說，如果你有三個可拖動的div分別設置其頂爲100，200，254的像素相對於它們的親本：jQuery的可拖動網格

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

問題這裏是：

<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所有的人都得到與設定爲[1，100] '網格' 拖動啓用作爲s當你拖動div3，比方說，它的頂部增加100，將它移動到354px而不是僅僅增加僅僅是46px（254 + 46 = 300），這將使它進入下一個停止在網格中 - 300px，如果我們正在查看parent-div作爲參考點和「電網持有人」。

我看了一下可拖動的源代碼，它似乎是一個內置的缺陷 - 它們只是執行所有相對於可拖動元素原始位置的計算。

我想避免monkey-patching可拖動庫的代碼，我真正在尋找的是如何讓Draggable計算相對於包含父級的網格位置。但是，如果猴子補丁是不可避免的，我想我必須忍受它。

來源

2010-06-14 Art

我解決此問題得到了通過簡單地增加自己的腳本拖動：拖動下，並設置其劃分math.Floor（X/100）×100與同爲Y.

如果你不這樣做心靈在源頭上瞧瞧 ~~http://labs.pezcuckow.com/solveit/game.html~~ 和make可拖動的功能！（遊戲不在附近完成）

您還會發現一個回覆問題，它不會將它們對齊回網格。所以我寫了我自己的「檢查是否無效」功能：可玩性（再次在上面的遊戲中可見）。

來源

2010-06-14 09:56:29

-1因爲與鏈接解決方案已經死亡 – ThiefMaster 2011-06-15 13:45:43

這篇文章已經過了一年多了，但是還算公平。 – 2011-06-19 10:59:45

對不起，沒有看日期。如果您更新了帖子，例如打破了這個聯繫。 – ThiefMaster 2011-06-19 11:11:34

我已經開始在過去的幾天裏使用JQuery拖動，發現了一個簡單的解決方法。

將位置屬性設置爲絕對值，並將頂部和左側的小部件添加到排列在網格上的值。

由於top/left的值是絕對值，所以在離開時將它們存儲在數據庫中會更有意義。

來源

2011-02-06 13:25:38 CResults

自@佩斯的回答丟失（404），這裏是我是如何做的：

$('#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; 
    } 
});

演示：http://jsfiddle.net/ThiefMaster/yGsSE/

來源

2011-06-15 14:09:20 ThiefMaster

我正試圖實現上面提到的小提琴，但我很難知道我需要哪些資源。 1.5。2似乎是足夠的，如果我也有1.8.9 UI，但哪些UI文件？我喜歡你的解決方案，因爲它非常流暢和優雅，這正是我一直在尋找的。 – 2011-07-20 23:37:13

通常沒有理由使用舊的jQuery版本。因此，請使用1.6.1以及最新的UI版本。除此之外，使用UI包構建器幷包含'Draggable' - 它應該選擇所有必需的東西。 – ThiefMaster 2011-07-21 07:24:57

當網格大小大於10像素時，人們可能希望元素捕捉到兩個方向，而不僅僅是向左（這發生在'floor'）：'ui.position.left = Math.round（（ui.position.left - 偏移量）/ 100）* 100 +偏移量（其中偏移量是網格左邊界的位置）。 – Milanka 2014-03-06 20:26:33

jQuery的桌面：

<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>

來源

2012-01-30 17:17:31 misima

jQuery的可拖動網格

回答

相關問題