如何拖动图像并将其放置在所需的位置？

我正在尝试制作一个界面，用户可以在其中选择并拖动图像并将其放在另一图像上的所需位置。如何拖动图像并将其放置在所需的位置？

我从下面的代码开始。我可以拖放，但图像会自动放在左上角。我想将图像放在所需的位置（例如，在某处或者右下角等）。我怎样才能做到这一点？

代码我开始与：

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#div1 {width:900px;height:900px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script> 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 

<p>Drag image into the rectangle:</p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<br> 
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

来源

2014-12-08 maverick

你google一下呢？ – 2014-12-08 10:11:41

添加'console.log（ev）;'到drop函数，这应该有所帮助。 – wawa 2014-12-08 10:13:58

编辑：试试这个：

$("#drag1").draggable(); 
 
     $("#div1").droppable({ 
 
      drop: function(ev,ui) { 
 
     \t // console.log(ui); 
 
     \t ev.preventDefault(); 
 
     \t 
 
     \t var data = ui.draggable.attr("id"); 
 
     
 
     \t  ev.target.appendChild(document.getElementById(data)); 
 
     \t  $("#"+data).css({top: ui.offset.top, left: ui.offset.left, position:'absolute'}); 
 
      } 
 
     });

#div1 {width:900px;height:900px;padding:10px;border:1px solid #aaaaaa;}

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>droppable demo</title> 
 
    
 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
    </head> 
 
    <body> 
 
     
 
    
 
     <div id="div1">Drop here</div> 
 
     <img id="drag1" src="http://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg"/> 
 
      
 
     
 
      
 
     </body> 
 
     </html>

来源

2014-12-08 10:00:32

@maverick试试这个。 – 2014-12-08 11:25:36

我已编辑过，请检查代码删除投票。 – 2014-12-08 11:26:35

我曾尝试过您的代码...他们的工作，但唯一的问题是，丢弃的图像没有限制在框中，我需要修复...谢谢！顺便说一句，我没有投票。 – maverick 2014-12-08 12:28:47

如何拖动图像并将其放置在所需的位置？

回答

相关问题