Jquerys draggierbares Netz

Question

Es sieht so aus Draggierbar ist relativ gebunden an die ursprünglichen Koordinaten des gezogenen Elements - also einfach gesagt, wenn Sie drei draggierbare Divs mit ihren haben oben Setzen Sie jeweils auf 100, 200, 254 Pixel im Vergleich zu ihrem Elternteil:

<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 Alle von ihnen werden für das Ziehen mit 'Grid' auf [1, 100] aktiviert:

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

Das Problem hier ist, dass sobald Sie ziehen, sobald Sie ziehen Div3, sagen wir, es ist die Oberseite um 100 erhöht und bewegt es auf 354px anstatt nur durch bloße Erhöhung zu erhöhen 46px (254 + 46 = 300), was es zum nächsten Stopp im Netz bringen würde - 300px, wenn wir uns das ansehen Eltern-div als Referenzpunkt und "Gitterhalter".

Ich habe mir die draggabbaren Quellen angesehen und es scheint ein eingebauter Fehler zu sein - sie machen nur alle Berechnungen in Bezug auf die ursprüngliche Position des draggablen Elements.

Ich möchte vermeiden, dass Affen den Code der draggablen Bibliothek anpatching, und was ich hier wirklich suche, ist die Art und Weise, wie die draggable die Gitterpositionen relativ zum Einhalt von Eltern berechnet werden können. Wenn jedoch das Affenpatching unvermeidlich ist, muss ich wohl damit leben.

Answer 1

Ich habe dieses Problem umgehen, indem ich einfach mein eigenes Skript hinzugefügt habe: unter Draggable und festgelegt, um Math.Floor (x/100)*100 und dasselbe für Y zu teilen.

Wenn es Ihnen nichts ausmacht, im Quellblick herumzustöbern http://labs.pezcuckow.com/solveit/game.html und die make -draggierbare Funktion! (Spiel nicht wo in der Nähe beendet)

Sie werden auch ein Problem mit Rückkehr finden, es bringt sie nicht zurück zum Netz. Also schrieb ich am Ende meine eigene "Überprüfung der ungültigen" Funktion: von Dragabble (erneut im obigen Spiel zu sehen).

Answer 2

Da die Antwort von @pez verloren geht (404), so habe ich es gemacht:

$('#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 3

Ich habe in den letzten Tagen angefangen, JQuery Draggable zu verwenden und eine einfache Lösung dafür zu finden.

Stellen Sie die Positionseigenschaft auf absolut ein und fügen Sie Ihre Widgets mit oberen und links auf Werte hinzu, die bis zu Ihrem Netz abhängen.

Da die Werte für Top/Links absolut sind, machen sie auch sinnvoller, wenn sie ausgehen und sie in einem DB speichern.

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>