How to Grab and Drag an Element Around a Circle

How to grab and drag an element around a circle?

changed some code

        $(document).ready(function(){               

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

            });                    
        }); ​

also add this code

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

in the function

this is the jsfiddle http://jsfiddle.net/sandeeprajoria/x5APH/11/

javascript use drag to move element

Not sure about your actual implementation. However this code works:

To do it using your code, here is the code. One obvious issue with your code is you need to add 'px' to your style.left and style.right. Also it is unknown how you actually handle the event from your code. Using this code, the element moves in a circle, you need to fix it but you get the idea.

var divOverlay = document.getElementById ("overlay");
var isDown = false;
divOverlay.addEventListener('mousedown', function(e) {
    isDown = true;
}, true);

document.addEventListener('mouseup', function() {
  isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
   event.preventDefault();
   if (isDown) {
   var deltaX = event.movementX;
   var deltaY = event.movementY;
  var rect = divOverlay.getBoundingClientRect();
  divOverlay.style.left = rect.x + deltaX + 'px';
  divOverlay.style.top  = rect.x + deltaX + 'px';
 }
}, true);

---

Below is another way of doing it.
Codepen example

var offset = [0,0];
var divOverlay = document.getElementById ("overlay");
var isDown = false;

divOverlay.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
    divOverlay.offsetLeft - e.clientX,
    divOverlay.offsetTop - e.clientY
 ];
}, true);

document.addEventListener('mouseup', function() {
   isDown = false;
}, true);

document.addEventListener('mousemove', function(e) {
    event.preventDefault();
    if (isDown) {
        divOverlay.style.left = (e.clientX + offset[0]) + 'px';
        divOverlay.style.top  = (e.clientY + offset[1]) + 'px';
   }
}, true);

D3 - dragging multiple elements across groups

I'm not really sure if there's a better way of finding the row, but here's how I solved it using the concept from @pmkroeker

  function dragged(d){
    var deltaX = d3.event.x - d3.select(this).attr("cx");
    d3.select(this).attr("cx", d.x = d3.event.x); // move the circle

    // find the row
    var row = d3.select(this).attr("class").split(/\s+/).filter(s=>s.startsWith("row_"))[0];

    // grab other elements of the row and move them as well
    d3.selectAll("."+row).filter(".rectGroup").attr("x", d=>d.x = d.x+deltaX);
    d3.selectAll("."+row).filter(".ellipseGroup").attr("cx", d=>d.cx = d.cx+deltaX);
  }

SVG draggable using JQuery and Jquery-svg

jQuery UI draggable behavior does work, but you need to update the position manually in the drag handler, as relative CSS positioning doesn't work inside SVG.

svg.rect(20,10,100,50, 10, 10, {fill:'#666'});
svg.rect(40,20,100,50, 10, 10, {fill:'#999'});
svg.rect(60,30,100,50, 10, 10, {fill:'#ccc'});

$('rect')
  .draggable()
  .bind('mousedown', function(event, ui){
    // bring target to front
    $(event.target.parentElement).append( event.target );
  })
  .bind('drag', function(event, ui){
    // update coordinates manually, since top/left style props don't work on SVG
    event.target.setAttribute('x', ui.position.left);
    event.target.setAttribute('y', ui.position.top);
  });

---

Related Topics