-1
我想在頁面中拖動2個面板。我可以拖動2個面板「FirstName」和「SecondName」。但我的要求是我需要將一個面板拖到另一個面板上方。當我將一個面板拖到另一端時，我拖回地面的面板必須是白色的。我通過查看一些教程找出了一些東西，但我找不到解決方案。如果有人知道解決方案，請幫助我。使用JavaScript，CSS和HTML拖放網頁中的面板
我的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);
}
但我想要在Javascript，css3和html – Swaroop 2012-03-26 05:27:31
嗨，我只想在JAvascript和css3中，我不想它在jquery – Swaroop 2012-03-26 06:58:45
@Swaroop - jQuery是JavaScript。這是一個框架，可以幫助您避免重新發明輪子（例如「addClassName」和「removeClassName」函數）。我強烈建議看看它，因爲它可以爲您節省無數時間和頭痛。 – Shauna 2012-03-26 12:03:18