Sonntag, Dezember 15, 2019

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

4 Kommentare

  1. 3

    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 –

    <html>
    <head>  
    </head>
    <body>
    <div id="page_wrap">
    <div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
    <div id="inactive_dragable" class="ui-widget-content">
        <p>Drag me around</p>
    </div>
    Lorem ipsum dolor sit amet...</div>
    </div>
    </body>
    </html>

    Hier ist dein javascript

    $(".demo").mousedown(function (e){
        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();
            $('<div/>', {
                id: 'tester',
            }).addClass('test_drag')
            .html("New div to drag")
            .css("top", _y + "px")
            .css("left", _x + "px")
            .draggable()                 
            .appendTo('#page_wrap');
            $("#tester").trigger(e); //this is the important line, that triggers the drag
    });

    Und CSS –

    #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; }
    • Vielen Dank für dein Kommentar, werde ich zusammen einige Beispiel-code, sehen aber deinen Kommentar habe ich realisiert meine app ist anders zu Verhalten, denn ich habe die draggable div in einem div mit dem style „overflow-y: auto;“ Wenn es ist ein scroll-bar können Sie nicht ziehen Sie es vor.
    • Irgendwie schon, obwohl das mousedown ist eine Art einer Anforderung, ich muss in der Lage sein mousedown -> Anruf-Funktion (die erstellt das div) -> während die Maus immer noch nach unten ziehen die div.
    • Auf Maus Anhängen, div, vermutlich rechts, wo die mousedown stattgefunden. Dann ohne das überspringen einer beat machen, dass das ziehen beginnen. Das wird schwierig sein.
    • Ich habe ein Stück über und kann nicht einen Weg finden, dies zu tun. Wenn ich du wäre, ich würde machen Sie sich bereit zu denken, ein anderer Ansatz, aber halten uns in der Zwischenzeit 😉
    • Ist es möglich? Ich würde das so gedacht, aber alles, was ich versuchen scheint nicht zu funktionieren. Ich dachte, das brennen einer anderen mousedown-Ereignis würde den trick tun, was ich tun kann falsch, aber kein Glück mit, dass entweder.
    • Danke, ich dachte, dass es vielleicht nicht möglich sein.
    • Ich denke, dass ich es herausgefunden. Alles, was Sie tun müssen, ist, tun .trigger(event). Sie verschieben Ihren code um, obwohl, müssen Sie alle Ihre css-und was weiß ich noch alles auf die div, bevor Sie Anhängen.
    • Ich denke, ich habe versucht, scheint nicht das Feuer aus den draggable Funktionen, die beginnt mit dem ziehen der div aber :/
    • Es ist, weil Ihre Berufung das Ereignis in den html-Code. Wenn Sie alle jquery wird es richtig funktioniert.
    • In meinem Beispiel-code habe ich die Zeile ‚$(„div#tester“).trigger(„mousedown“);‘ unter meine Kommentare in den JavaScript-Funktion, ist es das, was du meinst?
    • Oh man, sec ich glaube, ich verstehe was du jetzt meinst, keine inline-Funktion aufruft. Ich werde versuchen, dass.
    • Ja, anstelle der Verwendung von inline-event-handling können Sie binden Sie es mit Hilfe von jquery. $(thingtobindto).eventname(function (eventarg){ //do stuff }). api.jquery.com/category/events es ist viel sauberer und einfacher zu Lesen, meiner Meinung nach.
    • Versucht es mit ‚(Dokument).ready(function(){ $(„#inactive_dragable“).mousedown(function(e) {…‘ kein Glück obwohl.
    • Sie sind ein Genie. Vielen Dank, du hast gelöst, etwas ich würde nie in der Lage gewesen, zu mir selbst. Ich habe das Dokument.bereit überprüfen Sie vor der Anwendung der hf und der Positionierung muss ein zwicken, aber es funktioniert perfekt danke. Ich hoffe, Google findet diese da es keine schnelle Google-Lösung oder zumindest ich nicht fündig.
    • Ich bin kein Genie, aber ich bin froh, dass ich helfen konnte!

  2. 1

    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…

    $("div#divID").trigger("mousedown");
    • Danke, habe es versucht mit meinem Beispiel-code, noch kein Glück. Ich habe viele Wege versucht, ähnlich zu diesem, aber es scheint nicht, das Feuer aus den draggable Funktionen.
    • Ich glaube nicht, dass das funktionieren wird, wenn es ein plugin beteiligt. Es ist nur, ich sei ein pedant und der Beantwortung der Frage, buchstäblich, im Falle dass andere Leute landen hier auf der Suche nach, dass bestimmte Sache.
  3. 1

    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:

    $(".selector").draggable({
      appendTo:'body',
      addClasses:'',
      scroll:false,
      start:function(){
        //your code here
        //eg:
        $(this).html('something else');
      }
    });

    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! 🙂

    • Vielen Dank für die Antwort, ich habe etwas getan, was ähnlich wie diese, und es funktioniert Super, aber dann ist das problem auslösen des drag-event auf manuell, so dass, sobald Sie die Maus über den Benutzer ziehen können, um das div herum in der Regel.
    • So Ihr mousedown-hinzufügen eines div-Ereignis überschreiben, die drag event? Also anstatt ziehen Sie den neu hinzugefügten div Ihr nur das hinzufügen von mehr divs?
    • Ich bin mir nicht ganz sicher, was Los ist, das ist, warum ich bin das bitten um Hilfe. Es könnte möglich sein, es ist das überschreiben der Fall, obwohl. Mit der Art und Weise meiner app funktioniert das hinzufügen der draggable div onmousedown scheint der logische Weg zur Arbeit. Bitte sehen Sie sich den demo-code für eine bessere Erklärung.
    • siehe meine aktualisierte Antwort für einige demo-code, die das leistet, was ich denke, Sie versuchen zu tun.
    • sehen Sie, wenn meine editierte Antwort hilft dir!
    • Ich denke, was er tun will, ist sofort, nachdem das neue div-Element Hinzugefügt, und während Sie noch die Maus nach unten. Das neue div-Element beginnt mit dem ziehen.
    • Danke, ich gab es eine zu gehen, aber es scheint immer noch stecken in den div-container. Die einzige Arbeit, um die ich gerade denke, ist das erstellen einer benutzerdefinierten scroll-bar und nicht mit der ‚overflow‘ – Eigenschaft. Scheint ein bisschen übertrieben aber.
    • ok, in der start-Funktion hinzufügen, ein bisschen code zu entfernen „overflow:auto“ css aus dem parent-div. Sie können dann ersetzen Sie diese Eigenschaft mit der stop:function(){}, Veranstaltung.
    • es gibt viele Probleme, die mit overflow:auto und beweglicher Elemente. vielleicht statt mit einem scrollbaren Bereich, den Sie verwenden Seiten statt? was auch immer Sie tun, nicht erstellen einer Bildlaufleiste von Grund – ive getan und seine kürzlich eine komplette Alptraum!
    • ignorieren Sie die letzten beiden Kommentare – scroll:false sollte jetzt, Ihre Probleme zu lösen.
    • Sorry, ich verstehe nicht ganz, wo lege ich das scrollen falsch? Ich habe versucht, es in die ‚$(„.- Auswahl“).draggable({…‘ aber scheint nicht zu wirken.
    • .selector ist 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.

  4. 0

    Das Konzept der Schaffung einer Klon, die gezogen werden, ist bereits in die draggable-plugin. Sie hätte es gerne so:

    $('#tester').draggable({helper: 'clone', appendTo: 'body'});

    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

Kostenlose Online-Tests

Ihre Entwicklerrolle