Javascript 制作一个可拖动的新div，尝试了一切_Javascript_Jquery_Html_Drag And Drop_Draggable

Javascript 制作一个可拖动的新div，尝试了一切

javascript jquery html

Javascript 制作一个可拖动的新div，尝试了一切,javascript,jquery,html,drag-and-drop,draggable,Javascript,Jquery,Html,Drag And Drop,Draggable,你好，我是科姆尼我正在编写一些代码，使可拖动可调整大小的div。我让它处理最初创建的div，但新添加的div不可拖动以下是我的全部代码： <html> <head> <script> var id = 4; function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(e

你好，我是科姆尼

我正在编写一些代码，使可拖动可调整大小的div。我让它处理最初创建的div，但新添加的div不可拖动

以下是我的全部代码：

<html>
   <head>
      <script>
     var id = 4;
     function drag(ev)
     {
        ev.dataTransfer.setData("Text",ev.target.id);
     }

     function drop(ev)
     {
        ev.preventDefault();
        ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
    }
function change(div)
    {
    var divw=parseInt(div.style.width);
    var divh=parseInt(div.style.height);
    var imgw=divw-10;
    var imgh=divh-10;
    div.children[0].style.width=imgw;
    div.children[0].style.height=imgh;
    div.style.border="dotted 3px grey";
    }
function addimg()
    {
    var main = document.getElementById('main');
    var div  = document.createElement('div');
    div.onmouseout = function() {this.style.border=0};
    div.ondragstart = function() {drag(event)};
    div.onmousemove = function() {change(this)};
    div.setAttribute('draggable', true);
    div.id = 'div'+id;
        id+=1;
        div.style.styleFloat = 'left';
        div.style.cssFloat = 'left';
        div.style.resize = 'both';
        div.style.overflow = 'hidden';
        div.style.height = '110px';
        div.style.width = '110px';
        div.innerHTML = '<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />';
        main.appendChild(div);
     }
      </script>
   </head>   
   <body>
      <center>
     <div ID="main" ondragover="event.preventDefault()" ondrop="drop(event)" style="width:900px; height:900px; border: dashed 1px lightgrey;" overflow="auto">
        <div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div1" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
           <textarea onblur="this.nextElementSibling.innerHTML=this.innerHTML" style="resize:none; width: 100px; height: 100px"></textarea>
           <p style="background-color: blue"></p>
        </div>
        <div style="clear:both"></div>
        <div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div2" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
          <img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
        </div>   
        <div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div3" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
          <img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
        </div>   
     </div>
      </center>
      <button onclick="addimg()">add an image</button>
   </body>
</html>


var-id=4；
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
appendChild（document.getElementById（ev.dataTransfer.getData（“文本”））；
}
功能更改（div）
{
var divw=parseInt（div.style.width）；
var divh=parseInt（div.style.height）；
var imgw=divw-10；
var-imgh=divh-10；
div.children[0]。style.width=imgw；
div.children[0]。style.height=imgh；
div.style.border=“虚线3px灰色”；
}
函数addimg（）
{
var main=document.getElementById（'main'）；
var div=document.createElement（'div'）；
div.onmouseout=function（）{this.style.border=0}；
div.ondragstart=函数（）{drag（event）}；
div.onmousemove=function（）{change（this）}；
div.setAttribute（'draggable'，true）；
div.id='div'+id；
id+=1；
div.style.styleFloat='left'；
div.style.cssFloat='left'；
div.style.resize='both'；
div.style.overflow='hidden'；
div.style.height='110px'；
div.style.width='110px'；
div.innerHTML=''；
主分区（分区）；
}

添加图像

问题是新的div无法拖动

另外，如果您使用jquery，请非常详细地解释它，我没有使用它的经验。

一个解决方案是使用与创建

元素相同的方法来创建

：

change（）

函数可以重写为：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这比原来的要短一些。第一行将

div

参数转换为jquery对象，并将其存储在

$div

变量中。变量名开头的

只是一种约定，因为该变量包含一个jquery对象。在这个变量中缓存jquery对象比在

change（）

函数中使用

$（div）

三次更有效

调用

$div.width（）

和

$div.height（）

执行与原始函数中的

parseInt（）

调用相同的操作。Jquery允许函数调用被“链接”，因此对

$div

的第一次调用设置边框样式并返回相同的

$div

对象。调用

.children（）

$div

（元素

的第一个子元素），然后使用相应的方法设置其宽度和高度

应该注意的是，jquery通常被认为更易于使用，并且提供了良好的跨浏览器兼容性（这可能是一个真正令人头痛的问题），而不是更高效

将样式移出元素我们可以将common

style

属性从各个元素中移到html的

中的一个单独部分中：

这和你要找的一样吗？如果需要的话，我很乐意提出更多的修改建议

Jquery提供-使用绝对定位；和-提供与上述代码类似的“快速下降”行为。尽管我不建议您改用它们，但它们可能是您希望代码如何运行的良好指南。

一种解决方案是使用与创建

元素相同的方法来创建

：

change（）

函数可以重写为：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这比原来的要短一些。第一行将

div

参数转换为jquery对象，并将其存储在

$div

变量中。变量名开头的

只是一种约定，因为该变量包含一个jquery对象。在这个变量中缓存jquery对象比在

change（）

函数中使用

$（div）

三次更有效

调用

$div.width（）

和

$div.height（）

执行与原始函数中的

parseInt（）

调用相同的操作。Jquery允许函数调用被“链接”，因此对

$div

的第一次调用设置边框样式并返回相同的

$div

对象。调用

.children（）

$div

（元素

的第一个子元素），然后使用相应的方法设置其宽度和高度

应该注意的是，jquery通常被认为更易于使用，并且提供了良好的跨浏览器兼容性（这可能是一个真正令人头痛的问题），而不是更高效

将样式移出元素我们可以将common

style

属性从各个元素中移到html的

中的一个单独部分中：

这和你要找的一样吗？如果需要的话，我很乐意提出更多的修改建议

Jquery提供-使用绝对定位；和-提供与上述代码类似的“快速下降”行为。尽管我不建议您改用它们，但它们可能是您希望代码如何运行的良好指南。

一种解决方案是使用与创建

元素相同的方法来创建

：

change（）

函数可以重写为：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

这比原来的要短一些。第一行将

div

参数转换为jquery对象，并将其存储在

$div

变量中。变量名开头的

只是一种约定，因为该变量包含一个jquery对象。缓存jquery对象

<style>
    #main {
      width:900px; 
      height:900px; 
      border: dashed 1px lightgrey;
      overflow: auto;
    }
    .dragDiv {
      float: left; 
      resize: both; 
      overflow: hidden; 
      height: 110px; 
      width: 110px;
    }
   .dragDiv img {
      width: 100px; 
      height: 100px
   }
   .dragDiv textarea {
      resize: none; 
      width: 100px; 
      height: 100px;
   }
</style>

<div id="main" ondragover="event.preventDefault()" ondrop="drop(event)">
    <div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div1">
       <textarea onblur="this.nextElementSibling.innerHTML=this.innerHTML"></textarea>
       <p style="background-color: blue"></p>
    </div>
    <div style="clear:both"></div>
    <div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div2">
      <img draggable="false" src="https://www.google.com/images/srpr/logo11w.png" />
    </div>   
    <div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div3">
      <img draggable="false" src="https://www.google.com/images/srpr/logo11w.png" />
    </div>   
</div>

div.ondragstart = function() {drag(event)};

div.ondragstart = function(event) {drag(event)};