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.
InformationsquelleAutor Ally | 2012-01-06
Schreibe einen Kommentar