Перетаскиваемая сетка jQuery

Question

Похоже, что параметр 'grid' в конструкторе Draggable относительно привязан к исходным координатам перетаскиваемого элемента - проще говоря, если у вас есть три перетаскиваемых элемента div с их верхним значением соответственно 100, 200 и 254 пикселей их родителю:

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

И все они получают возможность перетаскивания с сеткой [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
    });
});

Проблема здесь в том, что как только вы перетаскиваете div3, скажем, вниз, его вершина увеличивается на 100, перемещая его до 354px, а не просто на 46px (254 + 46 = 300), что приведет к следующей остановке в сетке - 300 пикселей, если мы смотрим на родительский div как точку отсчета и "держатель сетки".

Я посмотрел на перетаскиваемые источники, и это, кажется, встроенный недостаток - они просто делают все вычисления относительно исходного положения перетаскиваемого элемента.

Я хотел бы избежать мартовских исправлений кода перетаскиваемой библиотеки, и здесь я действительно ищу способ заставить Draggable вычислять позиции сетки относительно содержания родительского элемента. Однако, если исправление обезьян неизбежно, я думаю, мне придется с этим смириться.

Answer 1

Я справился с этой проблемой, просто добавив свой собственный скрипт для перетаскивания: под draggable и установив его для деления math.Floor(x/100)*100 и то же самое для Y.

Если вы не возражаете возиться с исходным кодом, посмотрите на http://labs.pezcuckow.com/solveit/game.html и функцию make draggable! (игра где-то рядом не закончена)

вы также найдете проблему с возвратом, она не вернет их обратно к сетке. Таким образом, я написал свою собственную функцию "проверить, если недействителен" в конце: dragabble (снова можно увидеть в игре выше).

Answer 2

Поскольку ответ @Pez потерян (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/

Answer 3

Я начал использовать JQuery Dragable в последние пару дней и нашел решение этой проблемы.

Установите для свойства position значение absolute и добавьте свои виджеты, указав верхний и левый значения, которые соответствуют вашей сетке.

Поскольку значения для верхнего / левого являются абсолютными, они также имеют больше смысла, когда уходят и сохраняют их в БД.

Answer 4

Рабочий стол 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>