Question

我的div结构有点像这样，

<div class="fromDiv"> 
.......From here I want to drag..........
</div>
<div class="parantDiv">
     <div class="childFirst">
          ..Here Want to drop......
     </div>
     <div class="childSecond">
          ..OrHere Want to drop......
     </div>
</div>

我想从fromDiv Div中拖出一些东西...... 并希望在childFirst Div OR childSecond Div ....

中删除它

请帮帮我...........

Answer 1

您可以使用HTML5拖放功能，请检查浏览器支持

简单示例

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<style>
.fromDiv,.childFirst, .childSecond {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.innerHTML);
}

function drop(ev) {
    ev.preventDefault();
    ev.target.innerHTML = ev.dataTransfer.getData("text");
}
</script>
</head>
<body>

<div class="fromDiv" draggable="true"
ondragstart="drag(event)"> 
.......From here I want to drag..........
</div>
<div class="parantDiv">
     <div class="childFirst" ondrop="drop(event)" ondragover="allowDrop(event)">
          ..Here Want to drop......
     </div>
     <div class="childSecond" ondrop="drop(event)" ondragover="allowDrop(event)">
          ..OrHere Want to drop......
     </div>
</div>

</body>
</html>

＆＃13;

.droppable函数在Inner div中不起作用

1 个答案: