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>

这里我需要使这个文本画布div可拖动，以便用户可以拖动我的文本，他可以将它放在图像中的任何位置（仅在图像画布div内）。我看到html拖放，但我不明白如何应用它。

Answer 1

签出HTML5拖放

HTML5 Drag & Drop

Answer 2

基于您的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>

Answer 3

为可拖动元素创建目标。启用任何可放置的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 Droppable插件使所选元素可以删除（意味着它们接受被draggables删除）。您可以指定每个可接受的拖动。

主题化

droppable小部件使用jQuery UI CSS框架来设置其外观样式。如果需要可删除的特定样式，则以下CSS类名可用于覆盖或作为classes选项的键：

ui-droppable：可放置的元素。当激活可以在此dropppable上删除的可拖动时，将添加ui-droppable-active类。在此dropable上拖动一个draggable时，会添加ui-droppable-hover类。

链接https://jqueryui.com/droppable/

Answer 4

请参阅jQuery UI here

中的Draggable示例

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

4 个答案: