Question

javascript来个大神帮我封装下函数

window.onload=function()
{
var d1=document.getElementById('d1')
var d2=document.getElementById('d2')
var disX=0;
var disY=0;
d1.onmousedown=mouseDown;

function mouseDown(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-d1.offsetLeft;
disY=oEvent.clientY-d1.offsetTop;
if (d1.setCapture) {
d1.onmousemove=mouseMove;
d1.onmouseup=mouseUp;
d1.setCapture();
} else{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
return false;
}
function mouseMove(ev)
{
var oEvent=ev||event;
l=oEvent.clientX-disX;
y=oEvent.clientY-disY;

d1.style.left=l+'px';
d1.style.top=y+'px';
};
function mouseUp()
{
this.onmousemove=null
this.onmouseup=null

if(d1.releaseCapture)
{
d1.releaseCapture()
};
};
};

Answer 1

这不是已经封装好了么-_-

--回复评论--

原来你是想要这样的封装呀，其实也简单，把里面的东东再封装一个函数，传一个id进去就好了：

window.onload=function() {
  function draggable(id) {
    var d =document.getelementbyid(id)
    var disx=0;
    var disy=0;
    d.onmousedown=mousedown;
    function mousedown(ev) {
      var oevent=ev||event;
      disx=oevent.clientx-d.offsetleft;
      disy=oevent.clienty-d.offsettop;
      if (d.setcapture) {
        d.onmousemove=mousemove;
        d.onmouseup=mouseup;
        d.setcapture();
      } else{
        document.onmousemove=mousemove;
        document.onmouseup=mouseup;
      }
      return false;
    }
    function mousemove(ev) {
      var oevent=ev||event;
      l=oevent.clientx-disx;
      y=oevent.clienty-disy;
      d.style.left=l+'px';
      d.style.top=y+'px';
    };
    function mouseup() {
      this.onmousemove=null
      this.onmouseup=null
      if(d.releasecapture) {
        d.releasecapture()
      };
    };
  }
  draggable('d1');
  draggable('d2');
  draggable('d3');
  draggable('d4');
};

或者直接传个DOM进去也行：

function draggable(d) {
 //...
}

draggable(document.getElementById('d1'));
draggable(document.getElementById('d2'));

不过感觉更麻烦了

Answer 2

按照你的思路函数是这样的function $(id){ return document.getElementById(id)}function ad(){ return parseInt($('ab1').innerHTML) * parseInt($('cd1').innerHTML) + parseInt($('ab2').innerHTML) * parseInt($('cd2').innerHTML) + parseInt($('ab3').innerHTML) * parseInt($('cd3').innerHTML)}这种方法比较简单易懂如果有规律的话，可自行封装

Answer 3

window.onload = function() {
    var disX = 0;
    var disY = 0;
    d1.onmousedown = function(ev) {
        ev = ev || event;
        disX = ev.clientX - d1.offsetLeft;
        disY = ev.clientY - d1.offsetTop;
        if (d1.setCapture) {
            d1.onmousemove = mouseMove;
            d1.onmouseup = mouseUp;
            d1.setCapture();
        } else {
            document.onmousemove = function(ev) {
                ev = ev || event;
                l = ev.clientX - disX;
                y = ev.clientY - disY;
                d1.style.left = l + 'px';
                d1.style.top = y + 'px';
            };
            document.onmouseup = function() {
                this.onmousemove = null;
                this.onmouseup = null;
                if (d1.releaseCapture) {
                    d1.releaseCapture();
                }
            };
        }
        return false;
    };
};

追问

不能有d1啊大神,把d1用属性传进去啊,那样能多次使用,这样只能d1专用啊,我是想弄多个物体移动,不是单个啊.