jquery versleepbaar: hoe beperk ik het versleepbare gebied?

Ik heb een versleepbaar object (div), en een aantal verplaatsbare objecten (tabel TD’s). Ik wil dat de gebruiker mijn versleepbare object naar een van die verplaatsbare TD’s sleept.

Ik schakel verslepen en neerzetten op deze manier in:

$(".draggable").draggable();
$(".droppable").droppable();

Het probleem is dat de gebruiker hiermee de div overal op het scherm kan slepen, ook uit het droppable-gebied.

Hoe kan ik het grensgebied voor het versleepbare object beperken?


Antwoord 1, autoriteit 100%

Gebruik de optie “insluiting”:

jQuery UI API – Draggable Widget – containment

In de documentatie staat dat het alleen de waarden accepteert: 'parent', 'document', 'window', [x1, y1, x2, y2]maar ik meen me te herinneren dat het ook een selector zoals ‘#container’ accepteert.


Antwoord 2, autoriteit 17%

$(function() { $( "#draggable" ).draggable({ containment: "window" }); });

van deze code wordt niet weergegeven.
Volledige code en demo:
http://www.limitsizbilgi.com /div-tasima-surukle-birak-div-drag-and-drop-jquery.html

Om het element binnen zijn bovenliggende element te beperken:

$( "#draggable" ).draggable({ containment: "window" });

Antwoord 3, autoriteit 11%

Hier volgt een codevoorbeeld. #thumbnail is een DIV-ouder van de #handle DIV

buildDraggable = function() {
    $( "#handle" ).draggable({
    containment: '#thumbnail',
    drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
        ICZoom.panImage(top, left);
    },
});

Antwoord 4

Zie fragment uit officiële documentatie voor containment-optie:

insluiting

Standaard:false

Beperkt slepen tot binnen de grenzen van het opgegeven
element of regio.
Meerdere typen ondersteund:

  • Selector: het versleepbare element wordt opgenomen in het selectiekader van het eerste element dat door de selector is gevonden. Als er geen element wordt gevonden, wordt er geen insluiting ingesteld.
  • Element: het versleepbare element wordt opgenomen in het selectiekader van dit element.
  • String: Mogelijke waarden: "parent", "document", "window".
  • Array: een array die een begrenzingsvak definieert in de vorm [ x1, y1, x2, y2 ].

Codevoorbeelden:
Initialiseer de draggable met de containmentoptie gespecificeerd:

$( ".selector" ).draggable({
    containment: "parent" 
}); 

Krijg of stel de optie containmentin, na initialisatie:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

Antwoord 5

$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});

Other episodes