Question

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

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

我开始的代码：

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

Answer 1

已编辑：试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: