使新的div可拖动，尝试了所有操作

Question

Hello stackoverflow comunity. 您好stackoverflow社区。

I am working on some code that makes draggable resizeable divs. 我正在研究使可拖动的可调整大小div的一些代码。 I have it working with the divs that are created originally, but the newly added divs arent becomming draggable. 我有它与最初创建的div一起工作，但是新添加的div不再是可拖动的。

Here is ALL my code: 这是我所有的代码：

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

the issue is that the new divs aren't draggable. 问题是新的div不可拖动。

PS if you use jquery, please explain it very detailed, i have no experience with it. PS，如果您使用jquery，请对其进行详细说明，我对此没有经验。

Answer 1

I m not sure what draggable function in this case is. 我不确定在这种情况下是什么可拖动功能。 Is it just dragging this newly added image to this element in top left ? 只是将这个新添加的图像拖到左上方的此元素中吗？ After what that image disappear ? 那张图片消失了什么之后？

If this is case, solution is very simple. 如果是这种情况，解决方案非常简单。 In function addimage you have wrong line.Your line is: 在addimage函数中，您有错误的行，您的行是：

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

And it should be 应该是

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

In this line you call function without setting event as argument, and you use it in function. 在这一行中，您调用函数而不将event设置为参数，并在函数中使用它。 Hope it helps. 希望能帮助到你。

Answer 2

One solution is to use the same method used to create the <img> element, to create the <div> : 一种解决方案是使用与创建<img>元素相同的方法来创建<div> ：

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

      function drop(ev) {
        ev.preventDefault();         
        document.getElementById('main')
                .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');
        main.innerHTML += '<div id="div'+id+'" onmouseout="this.style.border=0" draggable="true" ' +
                          'ondragstart="drag(event)" onmousemove="change(this)" style="float:left; ' +
                          'resize:both; overflow:hidden; height: 110px; width:110px"></div>';
        div = document.getElementById('div'+id);
        div.innerHTML = '<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />';
        id+=1;
      }
      </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>

This should ensure the browser renders the new <div> element in the same way as the existing ones. 这应确保浏览器以与现有元素相同的方式呈现新的<div>元素。 In addition ensuring that elements are appended back to the main <div> element when they are dropped, will prevent them from disappearing when dropped onto of other elements, as previously. 此外，确保在放置元素时将它们附加回main <div>元素，这将防止它们在拖放到其他元素上时消失，就像以前一样。

Using Jquery 使用jQuery

On the tip of using jquery, if we include the jquery.min.js library at the top of the file: 在使用jquery的技巧上，如果我们在文件顶部包含jquery.min.js库：

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

The change() function can be rewritten as: change()函数可以重写为：

function change(div) {
    var $div = $(div);
    $div.css('border','dotted 3px grey')
        .children( ':first' )
        .width( $div.width() - 10 )
        .height( $div.height() - 10 );
}

This is somewhat shorter than the original. 这比原始的要短一些。 The first line converts the div parameter into a jquery object and stores it in the $div variable. 第一行将div参数转换为jquery对象，并将其存储在$div变量中。 The $ at the beginning of the variable name is just a convention, as the variable contains a jquery object. 变量名开头的$只是一个约定，因为该变量包含一个jquery对象。 Caching the jquery object in this variable is more efficient than using $(div) 3 times in the change() function. 与在change()函数中使用$(div) 3次相比，在此变量中缓存jquery对象效率更高。

Calls to $div.width() and $div.height() perform the same action as the parseInt() calls in the original function. 调用$div.width()和$div.height()执行与原始函数中parseInt()调用相同的操作。 Jquery allows function calls to be 'chained', thus the first call on $div sets the border style and returns the same $div object. jQuery允许函数调用被“链接”，因此对$div的第一次调用会设置边框样式并返回相同的$div对象。 The .children() call returns the first child of $div (the <img> element) which then has it's width and height set using the corresponding methods. .children()调用返回$div的第一个子元素（ <img>元素），然后使用相应的方法设置其宽度和高度。

It should be noted that jquery is generally thought to be easier to use, and offer good cross browser compatibility (which can be a real headache) rather than more efficient. 应该注意的是，一般认为jquery更易于使用，并且提供了良好的跨浏览器兼容性（这可能真是令人头疼）而不是更有效。

Moving style out of elements 将样式移出元素

We can move the common style attribute out of the individual elements into a separate section in the <head> of the html: 我们可以将公共style属性从单个元素移到html的<head>中的单独部分中：

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

By giving the drag-able <div> elements the class dragDiv we reduce the amount of style duplication: 通过为可拖动的<div>元素提供类dragDiv我们减少了样式重复的次数：

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

Is this something like what you are looking for? 这是您想要的东西吗？ I'm happy to suggest more alterations, if required. 如果需要，我很乐意建议您进行其他更改。

Jquery offers draggables - which use absolute positioning; jQuery提供了可拖动对象 -使用绝对定位； resizables ; 可调整大小 ; and sortables - which offer similar 'snap on drop' behaviour as the code above. 和sortables-提供与上面的代码类似的“拖放”行为。 Although I don't suggest you use these instead, they might be good guides as to how you wish your code to behave. 尽管我不建议您改用这些代码，但是它们可能是您希望代码如何运行的良好指南。

使新的div可拖动，尝试了所有操作

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-11-24 23:42:35

解决方案2
1 2013-11-24 18:20:05

Using Jquery 使用jQuery

Moving style out of elements 将样式移出元素

使新的div可拖动，尝试了所有操作

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-11-24 23:42:35

解决方案2 1 2013-11-24 18:20:05

Using Jquery 使用jQuery

Moving style out of elements 将样式移出元素

解决方案1
2 已采纳 2013-11-24 23:42:35

解决方案2
1 2013-11-24 18:20:05