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 decontainment
optie gespecificeerd:$( ".selector" ).draggable({ containment: "parent" });
Krijg of stel de optie
containment
in, 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();
});