Перетаскивание холста с несколькими объектами

Я создаю перетаскивание нескольких элементов для проекта и достигнут стены.Перетаскивание холста с несколькими объектами

В настоящее время у меня есть 5 квадратных элементов, которые я добавил на холст, а также сохранил там x, y, width, height, bgcolour в массив, называемый элементами. Я обнаружил, когда мышь выбирает один из этих квадратов и может перетаскивать элемент вокруг. Однако моя проблема в том, что элемент, который я перетаскиваю, всегда тот же самый элемент, первый добавленный к холсту. Если кто-нибудь может помочь мне разобраться, как определить, какой элемент я выбрал, это было бы здорово.

Существует a'lot кода, поэтому я попытаюсь опубликовать только необходимые биты.

//Items are added to canvas and values added to items[]; 
//a click event runs when the canvas is clicked, the following code is then run 
var mouseCheck = function(e) { 
      var length = items.length; 

      var pos = $('#scalesPlatform').offset(), 
       top = pos.top, 
       left = pos.left, 
       mx = e.pageX - left, 
       my = e.pageY - top; 

       var imagedata = ctx.getImageData(mx, my, 1, 1); 

       if (imagedata.data[3] > 0) { 
        for (var i = length - 1; i >= 0; i--) { 
         var hit = items[i]; 
         offsetX = mx - items[i].x; 
         offsetY = my - items[i].y; 
         hit.x = mx - offsetX; 
         hit.y = my - offsetY; 


         canvas.addEventListener('mousemove', function() { 

          move(hit, drag, items, event); 
         }); 
         canvas.addEventListener('mouseup', function() { 
          drag = false; 
          move(hit, drag, event); 
         }); 
        } 
       } 

     }

Проблема в том, что мне нужен переменный хит, равный элементу, который я выбрал. Любая помощь будет очень признательна.

источник

2013-07-02 tdh108

'event.target' является объектом под цели при перетаскивании любого элемента. Возможно, вы можете получить идентификатор или имя объекта и передать его корреспонденту из массива items в вашей функции перемещения. –

Вот как перетащить/падение с несколькими элементами

Вы ваши квадраты, определенных в объектах:

var items=[] 
items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false}); 
items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false}); 
items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false});

Таким образом, вы можете нажать тест, как это определить, какой товар (ов) будет перетаскивается:

function setDragging(x,y){ 
    for(var i=0;i<items.length;i++){ 
     var item=items[i]; 

     // if x/y hit this item, set it’s isDragging flag 
     if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){ 
      item.isDragging=true; 
     } 

    } 
}

Ваш обработчик mousemove вычисляет расстояние перетаскивания.

 dragX=mouseX-startX; 
     dragY=mouseY-startY;

Затем в вашей функции draw() вы можете обрабатывать как элементы перетаскивания, так и перетаскивания.

Перетаскиваемые предметы будут нарисованы в исходном положении плюс dragX/dragY.

if(item.isDragging){ 
    ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height); 
}else{ 
    ctx.rect(item.x,item.y,item.width,item.height); 
}

Вот пример кода и Fiddle: http://jsfiddle.net/m1erickson/62L9q/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var isMouseDown=false; 
    var startX; 
    var startY; 
    var dragX; 
    var dragY; 

    var items=[] 
    items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false}); 
    items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false}); 
    items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false}); 

    draw(); 

    function draw(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<items.length;i++){ 
      var item=items[i]; 
      if(isMouseDown){ 

      } 
      ctx.beginPath(); 
      if(item.isDragging){ 
       ctx.rect(item.x+dragX,item.y+dragY,item.width,item.height); 
      }else{ 
       ctx.rect(item.x,item.y,item.width,item.height); 
      } 
      ctx.fillStyle=item.color 
      ctx.fill(); 
     } 
    } 


    function setDragging(x,y){ 
     for(var i=0;i<items.length;i++){ 
      var item=items[i]; 
      if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){ 
       item.isDragging=true; 
      } 
     } 
    } 

    function clearDragging(x,y){ 
     for(var i=0;i<items.length;i++){ 
      var item=items[i]; 
      if(item.isDragging){ 
       items[i].isDragging=false; 
       item.x+=dragX; 
       item.y+=dragY; 
      } 
     } 
    } 

    function handleMouseDown(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousedown stuff here 
     startX=mouseX; 
     startY=mouseY; 
     setDragging(startX,startY); 
     isMouseDown=true; 
    } 

    function handleMouseUp(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseup stuff here 
     isMouseDown=false; 
     clearDragging(); 
    } 

    function handleMouseOut(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mouseOut stuff here 
     isMouseDown=false; 
     clearDragging(); 
    } 

    function handleMouseMove(e){ 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     if(isMouseDown){ 
      dragX=mouseX-startX; 
      dragY=mouseY-startY; 
      draw(mouseX,mouseY); 
     } 

    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2013-07-02 19:55:11 markE

Перетаскивание холста с несколькими объектами

ответ

Смежные вопросы