[js]拖放控件时，鼠标滚轮向下移动时，控件不会跟着一起移动
0
悬赏园豆：200
[待解决问题]
<html>
<head>
<style>
div.portal-column1 {
background: white none repeat scroll 0 0;
margin: 0.25px;
padding: 0.25px;
width: 98%;
position: relative;
zoom:1;
display:inline-block;/* FF */
*display: inline; /* IE6+IE7 */
vertical-align: top;
}
div.module1
{
background: #f1f6fe none repeat scroll 0 0;
border: 7px solid #f1f6fe;
padding: 2px 3px;
margin: 5px 0;
background-color: white;
width: 730px;
}
div.module_content
{
background-color: #c1c6ce;
border: 1px solid #959697;
padding: 2px;
width: 250px;
}
div.module_content .close_button
{
float: right;
}
div.module_content p
{
margin: 0;
padding: 0;
}
.module_draggable
{
cursor: move;
}
#ghost
{
position: absolute;
z-index: 20;
/*width: 187px;*/
background-color: #000000;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: move;
}
#ghost .module
{
opacity: 0.65;
filter: alpha(opacity=50);
}
#ghostMarker
{
position: absolute;
z-index: 15;
height: 5px;
overflow: hidden;
border: 1px dashed #757677;
}
#portal-column-block-list {
position: absolute;
width:350px;
left:650px;
top:160px;
float: right;
z-index: 100;
border: 1px solid #959697;
background-color: white;
}
.portal-column-block
{
position: absolute;
z-index: 100;
border: 1px solid #959697;
background-color: white;
}
</style>
</head>
<body>
<!-- NO.1 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search1
</h2>
</div>
</div>
<!-- NO.2 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search2
</h2>
</div>
</div>
<!-- NO.3 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search3
</h2>
</div>
</div>
<!-- NO.4 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search4
</h2>
</div>
</div>
<!-- NO.5 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search5
</h2>
</div>
</div>
<!-- NO.6 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search6
</h2>
</div>
</div>
<!-- NO.7 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search7
</h2>
</div>
</div>
<!-- NO.8 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search8
</h2>
</div>
</div>
<!-- NO.9 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search9
</h2>
</div>
</div>
<!-- NO.10 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search10
</h2>
</div>
</div>
<!-- NO.11 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search11
</h2>
</div>
</div>
<!-- NO.12 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search12
</h2>
</div>
</div>
<!-- NO.13 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search13
</h2>
</div>
</div>
<!-- NO.14 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search14
</h2>
</div>
</div>
<!-- NO.15 -->
<div id="portal-column1" class="portal-column1">
<div class="module1">
<h2>
Search15
</h2>
</div>
</div>
</body>
</html>
<script>
//event_listeners.js
//dragdrop
addLoadListener(initModular);
function initModular() {
var _moduleContainers = document.getElementsByClassNameTagName("portal-column1","DIV");
if(!_moduleContainers)
return;
for(var i=0; i<_moduleContainers.length; i++) {
var container = _moduleContainers[i];
if(!container)
continue;
var nodes = container.childNodes;
for(var j=0; j<nodes.length; j++) {
if(nodes[j].tagName=="DIV" && hasClass(nodes[j],"module1")) {
addClass(nodes[j], "module_draggable");
attachEventListener(
nodes[j], "mousedown", mousedownModule, false);
}
}
}
}
var dragTarget;
function mousedownModule(event) {
if(typeof event == "undefined") {
event = window.event;
}
if(typeof event.target != "undefined") {
dragTarget = event.target;
} else {
dragTarget = event.srcElement;
}
while(!hasClass(dragTarget, "module1")) {
if(dragTarget.tagName == "A")
return false;
if(dragTarget.tagName == "INPUT")
return false;
if(dragTarget.tagName == "BODY")
return false;
dragTarget = dragTarget.parentNode;
}
dragOrigin = [event.clientX, event.clientY];
dragHotspots = [];
var _moduleContainers = document.getElementsByClassNameTagName("portal-column1","DIV");
if(!_moduleContainers)
return;
for(var i=0; i<_moduleContainers.length; i++) {
var container = _moduleContainers[i];
if(!container)
continue;
var nodes = container.childNodes;
for(var j=0; j<nodes.length; j++) {
if(nodes[j].tagName == "DIV" && hasClass(nodes[j], "module1")) {
var modulePosition = getPosition(nodes[j]);
dragHotspots[dragHotspots.length] =
{
element:nodes[j],
offsetX: modulePosition[0],
offsetY: modulePosition[1]
}
}
}
var modulePosition = getPosition(container);
dragHotspots[dragHotspots.length] =
{
element: container,
offsetX: modulePosition[0],
offsetY: modulePosition[1] + container.offsetHeight
}
}
var position = getPosition(dragTarget);
var ghost = document.createElement("div");
ghost.id = "ghost";
document.body.appendChild(ghost);
ghost.appendChild(dragTarget.cloneNode(true));
ghost.style.width = dragTarget.offsetWidth + "px";
ghost.style.left = position[0] + "px";
ghost.style.top = position[1] + "px";
attachEventListener(document, "mousemove", mousemoveDocument, false);
attachEventListener(document, "mouseup", mouseupDocument, false);
event.returnValue = false;
if(typeof event.preventDefault != "undefined")
event.preventDefault();
return true;
}
function mousemoveDocument(event) {
if (typeof event == "undefined")
{
event = window.event;
}
var ghost = document.getElementById("ghost");
if (ghost != null)
{
ghost.style.marginLeft = event.clientX - dragOrigin[0] + "px";
ghost.style.marginTop = event.clientY - dragOrigin[1] + "px";
}
var closest = null;
var closestY = null;
for (var i in dragHotspots)
{
var ghostX = parseInt(ghost.style.left, 10) + parseInt(ghost.style.marginLeft, 10);
var ghostY = parseInt(ghost.style.top, 10) + parseInt(ghost.style.marginTop, 10);
if (ghostX >= dragHotspots[i].offsetX - ghost.offsetWidth && ghostX <= dragHotspots[i].offsetX + dragHotspots[i].element.offsetWidth)
{
var distanceY = Math.abs(ghostY - dragHotspots[i].offsetY);
if (closestY == null || closestY > distanceY)
{
closest = dragHotspots[i];
closestY = distanceY;
}
}
}
if (closest != null)
{
var ghostMarker = document.getElementById("ghostMarker");
if (ghostMarker == null)
{
ghostMarker = document.createElement("div");
ghostMarker.id = "ghostMarker";
document.getElementsByTagName("body")[0].appendChild(ghostMarker);
}
ghostMarker.marked = closest.element;
ghostMarker.style.width = closest.element.offsetWidth + "px";
ghostMarker.style.left = closest.offsetX + "px";
ghostMarker.style.top = closest.offsetY + "px";
}
else
{
var ghostMarker = document.getElementById("ghostMarker");
if (ghostMarker != null)
{
ghostMarker.parentNode.removeChild(ghostMarker);
}
}
event.returnValue = false;
if (typeof event.preventDefault != "undefined")
{
event.preventDefault();
}
return true;
}
function mouseupDocument(event) {
detachEventListener(document, "mousemove", mousemoveDocument, false);
var ghost = document.getElementById("ghost");
if(ghost != null)
ghost.parentNode.removeChild(ghost);
var ghostMarker = document.getElementById("ghostMarker");
if(ghostMarker != null) {
if(!hasClass(ghostMarker.marked, "module1"))
{
ghostMarker.marked.appendChild(dragTarget);
}
else
{
ghostMarker.marked.parentNode.insertBefore(dragTarget, ghostMarker.marked);
}
ghostMarker.parentNode.removeChild(ghostMarker);
}
return true;
}
function getPosition(element) {
var x = 0;
var y = 0;
while (element != null) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return [x, y];
}
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
return false;
}
return true;
};
function attachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.addEventListener != "undefined")
{
target.addEventListener(eventType, functionRef, capture);
}
else if (typeof target.attachEvent != "undefined")
{
target.attachEvent("on" + eventType, functionRef);
}
else
{
return false;
}
return true;
};
function detachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.removeEventListener != "undefined")
{
target.removeEventListener(eventType, functionRef, capture);
}
else if (typeof target.detachEvent != "undefined")
{
target.detachEvent("on" + eventType, functionRef);
}
else
{
return false;
}
return true;
}
function hasClass(target, classValue)
{
var pattern = new RegExp("(^| )" + classValue + "( |$)");
if (target.className.match(pattern))
{
return true;
}
return false;
};
function addClass(target, classValue)
{
if (!hasClass(target, classValue))
{
if (target.className == "")
{
target.className = classValue;
}
else
{
target.className += " " + classValue;
}
}
return true;
};
function removeClass(target, classValue)
{
var removedClass = target.className;
var pattern = new RegExp("(^| )" + classValue + "( |$)");
removedClass = removedClass.replace(pattern, "$1");
removedClass = removedClass.replace(/ $/, "");
target.className = removedClass;
return true;
}
document.getElementsByClassName = function(className, parentElement) {
var children = ($(parentElement) || document.body).getElementsByTagName('*');
if(!children)
return null;
var objElements = new Array();
var j=0;
objElements = $A(children,"classname","(^|\\s)" + className + "(\\s|$)");
return objElements;
}
document.getValuesFromparentElement = function(id, parentElement,tagname) {
tagname = (tagname || '*');
var children = ($(parentElement) || document.body).getElementsByTagName(tagname);
if(!children)
return null;
var objValues = new Array();
var j=0;
objValues = $A(children,"id","(^|\\s)" + id + "(\\s|$)");
return objValues;
}
document.getElementsByClassNameTagName = function(className,tagname, parentElement) {
tagname = (tagname || '*');
var children = ($(parentElement) || document.body).getElementsByTagName(tagname);
if(!children)
return null;
var objElements = new Array();
objElements = $A(children,"classname","(^|\\s)" + className + "(\\s|$)");
return objElements;
}
var $A = Array.from = function(iterable,propertyname,strregExp) {
if (!iterable) return [];
if (iterable.toArray) {
return iterable.toArray();
}
else {
var results = [];
if(propertyname && strregExp && propertyname == "classname"){
for (var i = 0; i < iterable.length; i++){
if(iterable[i].className.match(strregExp)){
results.push(iterable[i]);
}
}
}
else if(propertyname == "id"){
for (var i = 0; i < iterable.length; i++){
if(iterable[i].id.match(strregExp)){
results.push(iterable[i]);
}
}
}
else{
for (var i = 0; i < iterable.length; i++)
results.push(iterable[i]);
}
return results;
}
}
function $() {
var results = [], element;
for (var i = 0; i < arguments.length; i++) {
element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
results.push(element);
}
return results.length < 2 ? results[0] : results;
}
</script>
所有回答(1)
0
好长的代码呀！呵呵
效果还不错，你说的”拖放控件时，鼠标滚轮向下移动时，控件不会跟着一起移动“是要一边按着左键一边滑动滚轮吗？如果是这样我觉得没有必要，那样好累呀！
