使一个新的 div 可拖动，尝试了一切答案

【问题标题】：making a new div draggable, tried everything使一个新的 div 可拖动，尝试了一切
【发布时间】：2013-12-07 13:47:28
【问题描述】：

你好 stackoverflow 社区。p>

我正在编写一些使可拖动的可调整大小的 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>

问题是新的 div 不可拖动。

附：如果你使用jquery，请解释的很详细，我没有这方面的经验。

【问题讨论】：

看看这个 jQuery:jqueryui.com/draggable
是否可以访问可拖动div的绳索，从而将其发送到服务器，以便下次任何用户访问该页面时它会在同一个地方？
是的，当然。使用 jQuery 偏移量：api.jquery.com/offset 我也会看看这个问题：stackoverflow.com/q/849030/2708677
看看这个......它更深入，完全符合您的要求：net.tutsplus.com/tutorials/javascript-ajax/…
这仍然不能解决在用户按下按钮时动态添加另一个 div 的问题。

标签： javascript jquery html drag-and-drop draggable

【解决方案1】：

我不确定这种情况下的可拖动功能是什么。是否只是将这个新添加的图像拖到左上角的这个元素上？那个图像消失后是什么？

如果是这种情况，解决方案非常简单。在函数addimage 中，您的线路错误。您的线路是：

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

应该是的

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

在这一行中，您调用函数而不设置event 作为参数，并在函数中使用它。希望对您有所帮助。

【讨论】：

没问题，去过了，嘿嘿。。还有一个建议，使用浏览器JS控制台，它会给你JS错误报告等等。

【解决方案2】：

一种解决方案是使用与创建<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>

这应该确保浏览器以与现有元素相同的方式呈现新的<div> 元素。除了确保元素在被删除时附加回main <div> 元素之外，还可以防止它们在被拖放到其他元素上时消失，如前所述。

使用 Jquery

关于使用 jquery 的提示，如果我们在文件顶部包含 jquery.min.js 库：

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

change() 函数可以改写为：

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

这比原来的要短一些。第一行将div 参数转换为jquery 对象并将其存储在$div 变量中。变量名开头的$ 只是一个约定，因为变量包含一个jquery 对象。在这个变量中缓存jquery对象比在change()函数中使用$(div) 3次效率更高。

对$div.width() 和$div.height() 的调用执行与原始函数中parseInt() 调用相同的操作。 Jquery 允许函数调用被“链接”，因此对$div 的第一次调用设置边框样式并返回相同的$div 对象。 .children() 调用返回$div 的第一个子元素（<img> 元素），然后使用相应的方法设置它的宽度和高度。

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

将样式移出元素

我们可以将常见的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>

通过将dragDiv 类赋予可拖动的<div> 元素，我们减少了样式重复的数量：

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

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

Jquery 提供draggables - 使用绝对定位； resizables;和sortables - 提供与上面的代码类似的“snap on drop”行为。虽然我不建议您改用这些，但它们可能是您希望代码行为方式的良好指南。

【讨论】：