javascript - .droppable 函数在内部 div 中不起作用

标签 javascript jquery

我的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 或 childSecond Div....

请帮帮我......

最佳答案

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

简单示例

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

关于javascript - .droppable 函数在内部 div 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44215179/

相关文章:

javascript - 无法使用 Magnific 弹出窗口和 PHP 设计我的 DIV

javascript - 使用 html 搜索文本换行

javascript - 依次显示元素

javascript - 保留、隐藏和重置基于按钮的选择选项

Jquery $ ('.class' )[0].css 返回未定义,编辑单个类元素

javascript - mediawiki api 无法显示数组的结果

javascript - 指令与服务重构 AngularJS 中多个 Controller 使用的常用方法

javascript - 输入框在 Firefox 中不起作用

Javascript DOMContentLoaded 有一个神秘的 5-10 秒延迟

javascript - 显示 anchor 标记