Javascript 如何使一个div在另一个div上拖动？_Javascript_Jquery_Html_Css

Javascript 如何使一个div在另一个div上拖动？

javascript jquery html css

Javascript 如何使一个div在另一个div上拖动？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要在另一个div上画一个div。如何做到这一点这是我的html，我使用媒体查询做出了响应 <style> .text-canvas{ z-index:1; position:absolute; } .imageupload{ z-index:-1; } </style> <script> function submit_button(){ alert('hi

我需要在另一个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>


.文本画布{
z指数：1；
位置：绝对位置；
}
.imageupload{
z指数：-1；
}
函数提交按钮（）{
警报（“hiii”）；
}
我的文字

在这里，我需要将这个文本画布div设置为可拖动的，这样用户就可以拖动我的文本，并将其放置在图像中的任何位置（仅在图像画布div内部）。

我看到html拖放，但我不明白如何应用它

为可拖动元素创建目标。允许任何DOM元素可拖放，即可拖动元素的目标

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  } );
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>


</body>
</html>


jQuery UI可拖放-默认功能
#可拖动{宽度：100px；高度：100px；填充：0.5em；浮动：左侧；边距：10px 10px 10px 0；}
#可拖放{宽度：150px；高度：150px；填充：0.5em；浮动：左侧；边距：10px；}
$（函数（）{
$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
}
});
} );
把我拖到我的目标
到这里来

jQueryUIDroppable插件使所选元素可拖放（这意味着它们接受由draggables拖放）。您可以指定每个draggables将接受哪些draggables

主题化

可拖放小部件使用jQueryUICSS框架来设计其外观。如果需要可拖放的特定样式，则以下CSS类名可用于覆盖或作为“类”选项的键：

ui可拖放：可拖放元素。当一个可放置在此DroppTable上的DragTable被激活时，ui DroppTable活动类被添加。将可拖动对象拖动到此可拖放对象上时，将添加ui可拖放悬停类

链接

查看jQuery UI中的可拖动示例

查看HTML5拖放

基于您的html：添加此脚本

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

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

(一)

(二)

确保已经包含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>