Question

Hello stackoverflow社区。

我正在研究一些使可拖动的可调整大小的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不可拖动。

P.S。如果你使用jquery，请详细说明，我没有经验。

Answer 1

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

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

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

它应该是

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

在此行中，您可以在不设置event作为参数的情况下调用函数，并在函数中使用它。希望它有所帮助。

Answer 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对象比在$(div)函数中使用change() 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>

通过为可拖动的<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>

这是你想要的吗？如果需要，我很乐意建议更多改动。

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

制作一个新的div draggable，尝试了一切

2 个答案:

使用Jquery

移出元素