使一个新的 div 可拖动，尝试了一切
Posted
技术标签:
【中文标题】使一个新的 div 可拖动，尝试了一切【英文标题】：making a new div draggable, tried everything 【发布时间】：2013-12-07 13:47:28 【问题描述】：你好 *** 社区。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 我也会看看这个问题：***.com/q/849030/2708677 看看这个......它更深入，完全符合您的要求：net.tutsplus.com/tutorials/javascript-ajax/… 这仍然不能解决在用户按下按钮时动态添加另一个 div 的问题。 【参考方案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”行为。虽然我不建议您改用这些，但它们可能是您希望代码行为方式的良好指南。
【讨论】：
以上是关于使一个新的 div 可拖动，尝试了一切的主要内容，如果未能解决你的问题，请参考以下文章