2012-04-13 18 views
1

Bisher habe ich einen Kreis mit einem Marker.Wie kann man ein Element um einen Kreis ziehen und ziehen?

http://jsfiddle.net/x5APH/1/

Ich würde die Markierung um den Kreis greifen möchten, und ziehen Sie jedoch die aktuelle Funktionalität stupst nur die Markierung, wenn Sie darauf klicken.

Welche Änderungen kann ich am Code vornehmen, damit der Marker bei gedrückter Maustaste um den Kreis gezogen werden kann?

Hinweis

Wenn Sie die Geige mit Ihrer Lösung aktualisieren könnte, würde ich es sehr zu schätzen.

Antwort

5

einige Code geändert

 $(document).ready(function(){    

      $('#marker').on('mousedown', function(){ 
       $('body').on('mousemove', function(event){ 
        rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));  
       }); 

      });      
     }); ​ 

auch diesen Code hinzufügen

$('body').on('mouseup', function(event){ $('body').unbind('mousemove')}); 

in der Funktion

ist dies die jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

+0

Danke Sandeep, das war genau was ich gesucht habe. Ich habe den '$ ('body')' Selektor durch '$ (document)' ersetzt, nur damit die Bewegung fortgesetzt werden kann, wenn jemand das Browserfenster verlässt. – user784637

+0

Es gibt ein Problem mit meinem Code http://jsfiddle.net/x5APH/16 Ich habe bemerkt, dass Sie direkt auf die Mitte des Blocks klicken müssen, um es zu verschieben. Gibt es eine Möglichkeit, auf eine Ecke zu klicken, um sie flüssig zu bewegen? – user784637

+0

Nun habe ich versucht, auf die Ecke der Box klicken ...es scheint gut zu funktionieren ... was genau suchst du .... –

0

etwas Derartiges zu tun:

Auf mousedown auf das gewünschte Element, Set:

  • mousemove Ereignis auf dem Dokument die Position des Ziel
  • mouseup Ereignis auf dem Dokument zu aktualisieren um die mousemove und mouseup Ereignisse, die Sie gerade festgelegt haben, zu entfernen.

Beispiel im Klar JS:

elem.onmousedown = function() { 
    document.body.onmousemove = function(e) { 
     e = e || window.event; 
     // do stuff with e 
    }; 
    document.body.onmouseup = function() { 
     document.body.onmousemove = document.body.onmouseup = null; 
    }; 
}; 

persönlich mag ich dies weiter zu verbessern, indem ein „Maske“ Element über die gesamte Seite zu schaffen Ereignisse zu erfassen, so dass (zum Beispiel) eine Auswahl ziehen oder Bild ist kein Standard-Browser Aktionen auslösen (die für alle Ereignis seltsam immun sind Methoden in diesem Fall Cancelling ...)

+0

Dank Kolink für die 'mousemove' und' mouseup' Konzept. Könntest du die Fiedel aktualisieren, wenn du Zeit hast? – user784637

+0

Leider nicht, weil ich jQuery (aus einer Reihe sehr guter Gründe) hartnäckig ablehne. Das Konzept ist nicht zu schwer, vor allem, da Sie bereits den Code für die Bewegung haben. Entfernen Sie einfach den aktuellen Onclick und ersetzen Sie ihn durch die Struktur, die ich in der Antwort angegeben habe. –

+0

@Kolink, Ich möchte einige dieser Gründe hören, warum Sie sich weigern, jQuery zu verwenden, ich bin persönlich ein Benutzer davon, aber ich habe nie von einem Grund gehört, es nicht zu verwenden, und würde schätzen, einige zu hören. – Dale