如何拖动图像并将其拖放到所需位置

How to drag an image and drop it at desired location?

本文关键字：拖放 位置 何拖动 拖动 图像      更新时间：2023-09-26

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

我从以下代码开始。我可以拖放，但图像会自动放在左上角。我想将图像放在所需的位置（例如，在中间某处或右下角等）。 我该怎么做？

我开始的代码：

<!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>

编辑：试试这个：

   
$('#drag1').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});
    $( "#div1" ).droppable({
      tolerance: 'fit'
    });
 #div1 {width:300px;height:300px;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>

相关文章：