jQuery Wie Feuer die drag-Ereignis, während die Maus immer noch down ist
Ok ich habe das Spiel, um mit dieser für Stunden jetzt und immer noch keine Würfel. Ich bin momentan dabei, eine Schnittstelle, so dass Sie drag-and-drop ein Symbol(ein div mit einem Bild drin). Ich bin mit dem jQuery UI Skripte für Sie ausprobiert und getestet, div Drag-Funktionalität.
Mein problem ist, können Sie nicht ziehen eine div, die es außerhalb der übergeordneten div. Um dies zu umgehen, ich bin die Schaffung einer dragable div, an das Dokument angefügt Körper, auf Nachfrage, wenn ein Anwender feuert ein mousedown-Ereignis. Aber ich kann nicht herausfinden, wie man Feuer aus dem drag-Ereignis nötig, so kann der Benutzer sofort beginnen, ziehen Sie das neu erstellte div.
Kurz gesagt ich brauche; Maus -> Anruf-Funktion zu erstellen, draggable div -> ziehen Sie das div herum, während die Maus immer noch down ist.
Ich bin sicher, es ist etwas zu einfach. Jede Hilfe wäre sehr geschätzt werden.
Hier ist ein Beispiel für mein problem, alle, die es ausführen muss, um die jQuery UI Skripte finden Sie unter dem oben genannten link.
<html>
<head>
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<style>
#inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
.test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }
</style>
<script>
function createDraggableDiv(e){
if (!e) var e = window.event;
jQuery('<div/>', {
id: 'tester',
}).appendTo('#page_wrap');
var isIE = document.all ? true : false;
var _x,_y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = e.clientX + document.body.scrollLeft;
_y = e.clientY + document.body.scrollTop;
}
var boundry = $('#page_wrap').offset();
$('#tester').addClass('test_drag');
$('#tester').html("New div to drag");
$('#tester').css("top", _y + "px");
$('#tester').css("left", _x + "px");
$('#tester').draggable();
//Now how do I make the new div immediately start dragging?
//...
}
</script>
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div onmousedown="createDraggableDiv(event);" id="inactive_dragable" class="ui-widget-content">
<p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</body>
</html>Wenn Sie klicken Sie auf die div-ich möchte in der Lage sein erstellen Sie ein neues div-Element und ziehen, um sofort.
- Zeigen Sie uns den code, den Sie zum erstellen der div.
- Haben Hinzugefügt Beispielcode innerhalb der createDraggableDiv-Funktion erstellt der code das div.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Endgültigen Bearbeiten. Hier ist die Funktionalität, die Sie wollen. Ich hatte den code so ändern, eine Menge, aber das tut, was Sie wollen, es zu tun. Sie übergeben müssen das mousedown-Ereignis, das Sie brennen in einem trigger auf die hinzugefügte div. Hier ist der neue jsfiddle
Dieses sollte Ihre html -
Hier ist dein javascript
Und CSS -
Den oben genannten Antworten sind besser, weil Sie diskutieren, tun es der richtige Weg. Jedoch buchstäblich die Antwort auf Ihre Frage, die Sie auslösen können, die das mousedown-Ereignis als solches...
ok. nach dem Lesen Ihre Kommentare, ich denke ich verstehe, was Sie versuchen zu tun, aber ich dont denke, es ist ein "start-ziehen" - Methode, die wir verwenden können, in jquery.
aber wie wäre es damit, statt der Bindung eines mousedown-Ereignis auf div Eine, die schafft das neue div B und dann versuchen zu ziehen div B, warum nicht entfernen Sie das mousedown-Ereignis insgesamt und ersetzen Sie es mit einem ziehbaren Ereignis, und Feuer aus einigen code am Anfang der Veranstaltung ziehen.
Beispiel:
den addClasses etwas verändern können das Aussehen Ihrer div, und die start-Ereignis ausgelöst werden kann off, code zu ändern, div Ein (die Sie jetzt ziehen) zu erscheinen wie Ihr bestimmt div B.
EDIT: das scroll:false bit bekommen sollte, um die Probleme, die Sie mit dem "overflow:auto" parent-div.
die ein bisschen von einer Arbeit um, aber sollte Ihnen die Funktionalität, die Sie nach sind (vorausgesetzt, ich verstehe Sie richtig, diese Zeit! 🙂
stop:function(){},Veranstaltung..selectorist nur die Kennung von dem, was Sie wollen zu ziehen, ich vermute ein html-div, zB<div class="selector">draggable</div>- ive bearbeitet meine Lösung und setzen Sie scroll:false, der richtige Ort für Sie.Das Konzept der Schaffung einer Klon, die gezogen werden, ist bereits in die draggable-plugin. Sie hätte es gerne so:
Dem appendTo option steht für das element, wo Sie wollen das der Helfer erstellt werden
Können Sie verstecken Sie Ihre erste gezogene Objekt auf dragstart (oder lassen Sie es, wenn Sie Wunsch)
Hier ein jsFiddle habe ich als ein Beispiel: http://jsfiddle.net/HnpbX/6/
Wenn Sie erreichen wollen eine Funktionalität von Drag & Drop ein element von einem container zu einem anderen, sollten Sie den abwerfbaren in Kombination mit ziehbar