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的可拖动网格

回答

相关问题