javascript - 使用jQuery的HTML 5嵌套拖放
问题描述
你好,我用 html5 拖放创建了一些演示。我有嵌套的可拖动容器。当我试图在子容器上拖动一个元素时,它会在两个容器上附加元素。我怎样才能修复那部分?请帮我。
这是我的例子`
html
<div id="div1">
container 1
<div id="div2">
container 2
</div>
</div>
<br>
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" width="336" height="69">
jQuery
$(document).ready(function() {
var drag1 = `<img src="http://www.w3schools.com/html/img_logo.gif" width="336" height="69">`
$("#div1").on("dragover", function(e) {
$(this).css('background', 'yellow');
e.preventDefault();
e.stopPropogation();
});
$("#div1").on("dragleave", function(e) {
$(this).css('background', 'none');
e.preventDefault();
e.stopPropogation();
});
$("#div2").on("dragover", function(e) {
$(this).css('background', 'yellow');
e.preventDefault();
e.stopPropogation();
});
$("#div2").on("dragleave", function(e) {
$(this).css('background', 'red');
e.preventDefault();
e.stopPropogation();
});
$("#drag1").on("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("Text", e.target.id);
});
$("#div1").on("drop", function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData("Text");
data === 'drag1' && $(this).append(drag1);
});
$("#div2").on("drop", function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData("Text");
data === 'drag1' && $(this).append(drag1);
});
});
css
#div1 {
min-width: 350px;
min-height: 70px;
padding: 40px;
border: 1px solid #aaaaaa;
}
#div2 {
width: 350px;
min-height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
background: red;
}
如果我想拖动子容器,它应该只放在那个容器上,但放在父容器上,我不知道如何停止拖动事件。
谢谢你的帮助。
解决方案
这是您的解决方案:http: //jsfiddle.net/43xky7ot/
1.) 这不是传播,而是传播e.stopPropagation()
2.) 放入 div2 时需要停止冒泡:$("#div2").on("drop", function(e) {e.stopPropagation();})
$(document).ready(function() {
var drag1 = `<img src="http://www.w3schools.com/html/img_logo.gif" width="336" height="69">`
$("#div1").on("dragover", function(e) {
$(this).css('background', 'yellow');
e.preventDefault();
e.stopPropagation();
});
$("#div1").on("dragleave", function(e) {
$(this).css('background', 'none');
e.preventDefault();
e.stopPropagation();
});
$("#div2").on("dragover", function(e) {
$(this).css('background', 'yellow');
e.preventDefault();
e.stopPropagation();
});
$("#div2").on("dragleave", function(e) {
$(this).css('background', 'red');
e.preventDefault();
e.stopPropagation();
});
$("#drag1").on("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("Text", e.target.id);
});
$("#div1").on("drop", function(e) {
e.preventDefault();
var data = e.originalEvent.dataTransfer.getData("Text");
data === 'drag1' && $(this).append(drag1);
});
$("#div2").on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
console.log('div2 dropped');
var data = e.originalEvent.dataTransfer.getData("Text");
data === 'drag1' && $(this).append(drag1);
});
});
推荐阅读
- c# - 当我通过 JsonConvert.SerializeObject(response) 返回时,不知道为什么我在邮递员响应中得到额外的 qoutes;
- reactjs - React redux - 动作
- ionic-framework - 使用预加载概念播放音频
- c++ - 如何告诉编译器优化数组访问?
- c# - 使用 NEST 进行分面搜索
- javascript - 为 jsTimezoneDetect js 库获取不同的时区 IE11 和 Chrome 浏览器
- html - 为什么这个搜索栏有这个奇怪的轮廓?- CSS
- discord.js - 如何在discord.js中一一接受多个输入
- angular - 在 AgGrid 中可观察:CellRenderer
- lua - 我的程序似乎无法识别 Lua 中的空格