Ich versuche herauszufinden, wie man ein Div mithilfe der ziehbaren und anpassbaren jQuery-Bibliotheken zeichnet. Ich habe dies gefunden Das ist ziemlich nett, aber ich möchte wirklich, dass diese Funktionalität mit den genannten Bibliotheken funktioniert. Um genauer zu sein, möchte ich in der Lage sein, ein ziehbares Element zu erstellen und alles auf einmal zu ziehen (seine Größe zu ändern). Ist das möglich?

EDIT: Vielleicht muss ich etwas tun, wenn das 'create'-Ereignis in ziehbarer oder veränderbarer Größe auftritt? Muss ich meine Maus irgendwie auf das veränderbare Eckding setzen? Die Größenänderung scheint sich erst einzuschalten, wenn Sie die Maus tatsächlich anheben und dann auf die Ecke für die Größenänderung drücken und ziehen. Hier ist der Code, den ich jetzt habe:

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
 });
2
Roman Epicnerd Sharf 6 Okt. 2012 im 18:46

3 Antworten

Beste Antwort

Ok, ich habe es endlich herausgefunden. Ich habe selectable () gemäß dem Vorschlag von @ lunmeat317 verwendet. Ich konnte die Mauspositionen während der Ereignisse von selectable erfassen: 'start' und 'stop' erstellen ein div mit der richtigen Breite, Höhe und Position. Hier ist die jsfiddle

1
Roman Epicnerd Sharf 9 Okt. 2012 im 19:28

Ich würde dies anders angehen - ich würde so etwas wie die jQueryUI selectable -Komponente verwenden, die bereits vorhanden ist bietet die Boxmethode. Es hat start und stop Ereignisse, die die Mauskoordinaten verfügbar machen. Auf dieser Grundlage können Sie für das Ereignis stop ein Div mit den erforderlichen Mauskoordinaten erstellen und diesem Div dann die Größe ändern und es ziehen.

So würde ich es sowieso machen.

Sie können auch genau das tun, was Sie tun, und versuchen, jQuery trigger() , wie so:

 $('.container').live('mousedown', function(){
    $('.container').append('<div class="gen-box"></div>');
    $('.gen-box').resizable().draggable();
    $('.gen-box').trigger('mousedown'); // This may activate the resize ability, but you may need to target the resize handle, instead of the full div.
 });

Dies scheint zu funktionieren, aber es kann einige Probleme geben (ich bin auf einen Thread gestoßen hier von 2008). Dies könnte Ihnen jedoch helfen, den richtigen Weg einzuschlagen. Viel Glück.

4
jedd.ahyoung 6 Okt. 2012 im 16:14

Das Ziehen und Ändern der Größe von Divs kann mit der jquery ui library ganz einfach durchgeführt werden.

Sie könnten dieses Beispiel versuchen. Laden Sie die neuesten JQuery- und JQuery-UI-Bibliotheken herunter und passen Sie die Quellpfade im Beispiel an. Zum Ändern der Größe können Sie die Größenänderung verwenden.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>

    <script type="text/javascript" src="/media/js/jquery-latest.js"></script>
    <script type="text/javascript" src="/media/js/jquery-ui-latest.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {        
        $( '#test' ).draggable();
      });
    </script>
  </head>

  <body>

    <div id="test" style="width: 100px; height: 50px; background-color: red;" >
      <p>Drag me</p>
    </div>

  </body>

</html>
0
JvdBerg 6 Okt. 2012 im 15:05