使用JavaScript、CSS、HTML在网页中拖放面板
Drag And Drop panels in a web page using JavaScript, CSS, HTML
我想在一页中拖动两个面板。我可以拖动两个面板"FirstName"answers"SecondName"。但我的要求是，我需要把一个面板拖到另一个面板上。当我把一个面板拖到另一端时，我拖回地面的面板必须是白色的。我通过看一些教程找到了一些东西，但我找不到解决方案。如果有人知道解决方案，请帮帮我。
我的JavaScript代码是
Element.prototype.addClassName = function(name) {
if (!this.hasClassName(name)) {
this.className = this.className ? [this.className, name].join(' ') : name;
}
};
Element.prototype.removeClassName = function(name) {
if (this.hasClassName(name)) {
var c = this.className;
this.className = c.replace(new RegExp("(?:^|''s+)" + name + "(?:''s+|$)", "g"), "");
}
};
var samples = samples || {};
// Almost final example
(function() {
var id_ = 'columns-almostFinal';
var cols_ = document.querySelectorAll('#' + id_ + ' .column');
var dragSrcEl_ = null;
this.handleDragStart = function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
dragSrcEl_ = this;
this.style.opacity = '0.8';
// this/e.target is the source node.
this.addClassName('moving');
};
this.handleDragOver = function(e) {
if (e.preventDefault) {
e.preventDefault(); // Allows us to drop.
}
e.dataTransfer.dropEffect = 'move';
return false;
};
this.handleDragEnter = function(e) {
this.addClassName('over');
};
this.handleDragLeave = function(e) {
// this/e.target is previous target element.
this.removeClassName('over');
};
this.handleDrop = function(e) {
// this/e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
// Don't do anything if we're dropping on the same column we're dragging.
if (dragSrcEl_ != this) {
dragSrcEl_.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
};
this.handleDragEnd = function(e) {
// this/e.target is the source node.
this.style.opacity = '1';
[].forEach.call(cols_, function (col) {
col.removeClassName('over');
col.removeClassName('moving');
});
};
[].forEach.call(cols_, function (col) {
col.setAttribute('draggable', 'true'); // Enable columns to be draggable.
col.addEventListener('dragstart', this.handleDragStart, false);
col.addEventListener('dragenter', this.handleDragEnter, false);
col.addEventListener('dragover', this.handleDragOver, false);
col.addEventListener('dragleave', this.handleDragLeave, false);
col.addEventListener('drop', this.handleDrop, false);
col.addEventListener('dragend', this.handleDragEnd, false);
});
})();
HTML代码就是这个
</head>
<body onload="" style="background-color: #333333;">
<div id="PodTemplate">
<div class="column">
<div class="header_align">
<ul class="inline">
<li>
<span style="float:left;clear:left;text-align:Right; ">First Name</span>
</li>
<li>
<span style="float:right;">
<div><a href=" #" ><img src="images/maximize_up.png"></a><div>
</span>
</li>
<li>
<span style="float:right;">
<div> <a href="#">
<img src="images/Forward.JPG" onClick="dropdown()"/></a>
<div class="drop" id="hide" style="display:none">
<ul>
<li><img src="images/excel_icon.png"> <img src="images/xml_file.png"></li></br>
<li><img src="images/xml_file.png"> <img src="images/excel_icon.png"></li>
</ul>
</div>
</div>
</span>
</li>
<li>
<span style="float:right;">
<div><a href=" #"><img src="images/minimize_up.png"></a>
</div>
</span>
</li>
</ul>
</Div>
</div>
<div class="column">
<div class="header_align">
<ul class="inline">
<li>
<span style="float:left;clear:left;text-align:Right; ">Second Name</span>
</li>
<li>
<span style="float:right;">
<div><a href=" #" ><img src="images/maximize_up.png"></a><div>
</span>
</li>
<li>
<span style="float:right;">
<div> <a href="#">
<img src="images/Forward.JPG" onClick="dropdown()"/></a>
<div class="drop" id="hide" style="display:none">
<ul>
<li><img src="images/excel_icon.png"> <img src="images/xml_file.png"></li></br>
<li><img src="images/xml_file.png"> <img src="images/excel_icon.png"></li>
</ul>
</div>
</div>
</span>
</li>
<li>
<span style="float:right;">
<div><a href=" #"><img src="images/minimize_up.png"></a>
</div>
</span>
</li>
</ul>
</Div>
</div>
</div>
<script type="text/javascript" src="drag with effect.js"></script>
</div>
</body>
</html>
CSS代码：
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
dd {
padding: 5px 0;
}
.column {
display:inline;
height: 500px;
width: 650px;
float: left;
border: 2px solid #1C1C1C;
background-color: #000000; /*Body colour*/
/*margin-right: 5px;*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 0px; /*Describes about box border(shape of the Box curve)*/
-webkit-box-shadow: inset 0 0 3px #000;
-moz-box-shadow: inset 0 0 3px #000;
-ms-box-shadow: inset 0 0 3px #000;
-o-box-shadow: inset 0 0 3px #000;
box-shadow: inset 0 0 3px #000;
text-align: left;
cursor: default;
margin-bottom: 10px;
}
.column header_align {
box-shadow: 3px;
padding: 3px; /*upper line */
/* background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); */
background: -webkit-gradient(linear, left top, right top,
color-stop(0, rgb(0,0,0)),
color-stop(0.50, rgb(79,79,79)),
color-stop(1, rgb(21,21,21)));
background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
background: -o-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
/* border-bottom: 1px solid #ddd; */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-ms-border-radius-topleft: 10px;
-o-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-ms-border-radius-topright: 10px;
-o-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
#PodTemplate .column {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out;
-ms-transition: -ms-transform 0.2s ease-out;
}
#PodTemplate .column.over
{
border: 2px dashed #000;
}
#PodTemplate .column.moving {
opacity: 0.25;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
}
请看一下这里。您可以看到不同的演示。您必须混合和匹配，但基本上使用jquery droptable，您可以为可拖动项目设置停靠区域，并将它们设置为捕捉到位置。JavaScript&jQuery；如何捕捉拖放
jQuery是多余的代码。我也不想要额外的框架。所有这些都可以在没有jQuery的情况下使用Html/css/javaScript来完成。干杯，Swaroop！
相关文章：
- EaseJS拖放;放下(动画CC）电影剪辑的鼠标坐标
- 为什么HTML5拖放的目标是孩子?(可排序列表）
- HTML/CSS-用于拖放的全页面覆盖
- Rubaxa可与聚合物进行排序/拖放不起作用，具体取决于显示器:
- dblclick事件是在jquery拖放后触发的
- 无法进行拖放以使用本地存储
- 如何使用Java脚本创建提交按钮's的拖放功能
- Chrome原生拖放相对容器并不能正确渲染重影
- 如何在Javascript中创建排序、拖放多级列表
- html5拖放文件-在提交整个表单时上传
- 在jQuery UI中获取ul和li值，拖放即可排序
- html5拖放确定拖动项目的来源
- 我使用什么语言来创建像Webly这样的拖放功能
- HTML5拖放;Drop-使用jQuery处理事件
- 使用jquery拖放图像
- HTML5拖放访问属性
- HTML5拖放-如何删除IE上的默认重影图像
- HTML5拖放新图像并替换Div中的现有图像
- 使用JavaScript、CSS、HTML在网页中拖放面板
- 在网页上拖放一个Div
