拖动之前和拖动之后加载本地数据 .load( "file_from_local.html");以及如何列出？
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
$( "#div2" ).load( "file_from_local.html");
}#div1, #div2 {
float: left;
width: 100px;
height: 500px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://www.w3schools.com/css/trolltunga.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>最佳答案
注意:我对您尝试做的事情有点困惑，但您的代码甚至无法正常工作，所以让我们从那里开始吧。
你可以在没有任何 jquery 的情况下做到这一点。一个简单的 JS 就可以了。
<style>
.div1, .div2 {
width: 350px;
height: 60px;
padding: 10px;
display:inline-block;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">关于javascript - 通过拖放加载本地数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40756465/