直接复制以下代码运行,现在鼠标拖住控件,鼠标滚轮往下移动时,控件不会跟着一起动,大家帮忙看下~谢谢~~~
<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>

解决方案 »

  1.   

    这里是.js代码~
    <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.ed = 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.ed, "module1"))
        {
                ghostMarker.ed.appendChild(dragTarget);
            }
        else
        {
                ghostMarker.ed.parentNode.insertBefore(dragTarget, ghostMarker.ed);
        }
        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>
      

  2.   

    这个高难度 。
    只知道要写window.onscroll事件 。
    等高手 。