javascript - 如何使一个div可以拖动到另一个div上？

Question

我需要使一个 div 可拖动到另一个 div 上。如何做到这一点？

这是我的 html，我使用媒体查询使其响应

<style>
    .text-canvas{
        z-index:1;
        position:absolute;
    }
    .imageupload{
        z-index:-1;
    }
</style>

<script>
    function submit_button(){
    alert('hiii');
   }

</script>
<div class="parent-canvas">
      <div class="text-canvas" contenteditable="true">
        my text
     </div>
     <div class="image-canvas">
         <div class="imageupload" onclick="submit_button()">
            <img src="img.png">
        </div>

    </div>
</div>

在这里，我需要使这个 text-canvas div 可拖动，以便用户可以拖动我的文本并将其放置在图像中的任何位置(仅在 image-canvas div 内)。我看到了 html 拖放，但我不明白如何应用它。

Answer 1

根据您的 html:添加此脚本

$( ".text-canvas"").draggable({
    containment: ".imageupload"
}); 

如果对语法或工作有任何疑问，请检查这些文档

(1) http://api.jqueryui.com/draggable/

(2) https://jqueryui.com/draggable/

确保您已经包含 jquery-ui.js 。首先你需要调用 jquery.js 或 jquery.min.js 然后只调用 jquery-ui.js ，顺序很重要。例如:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>