Question

我创建了两个简单元素：

＆＃13;

var mydragg = function() {
  return {
    move: function(div, xpos) {
      div.style.left = xpos + 'px';
    },
    startMoving: function(div, container, evt) {
      evt = evt || window.event;
      var posX = evt.clientX,
        divLeft = div.style.left,
        eWi = parseInt(div.style.width = "200px"),
        cWi = parseInt(document.getElementById(container).style.width = "200px");

      document.getElementById(container).style.cursor = 'move';

      divLeft = divLeft.replace('px', '');
      var diffX = posX - divLeft;
      document.onmousemove = function(evt) {
        evt = evt || window.event;
        var posX = evt.clientX,
          aX = posX - diffX;
        if (aX < 0) aX = 0;
        if (aX > cWi) aX = cWi;

        mydragg.move(div, aX);
      }
    },
    stopMoving: function(container) {
      var a = document.createElement('script');
      document.getElementById(container).style.cursor = 'default';
      document.onmousemove = function() {}
    },
  }
}();

＆＃13;

<div class="wrapper">
  <div id="container">
    <div class="green dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
    </div>
  </div>
</div>

<div class="wrapper wrapper-red">
  <div id="container">
    <div class="red dragme" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");'>
    </div>
  </div>
</div>

＆＃13;

一切正常（绿色和红色块通过鼠标拖动 - https://codepen.io/rinatoptimus/pen/GvMNPW），但不应该是具有相同名称的多个ID。因此，在代码无效后，我已将ID（＆＃39;容器＆＃39;）更改为类：https://codepen.io/rinatoptimus/pen/OjxWJO?editors=1010

Answer 1

你正在呼叫document.getElementById(container)，因为你自己说这是一个不是id的课程。您应该拨打document.getElementsByClassName。

但是，您只是查询文档中所有具有此名称的类名，因此您将获得多个而不知道选择哪个。有许多解决方案，但有一个是使用div.parentElement选择父元素可能更容易：

https://codepen.io/ferahl/pen/oeGBgL

Answer 2

您可以将元素发送到javascript，在javascript中，您只需直接访问您发送的元素，无需再次查询该元素。

HTML

<div class="wrapper">
<div class="container">     
    <div class="green dragme" onmousedown='mydragg.startMoving(this,event);' 
    onmouseup='mydragg.stopMoving(this);'>
    </div>
</div>

<div class="wrapper wrapper-red">
    <div class="container">     
        <div class="red dragme" onmousedown='mydragg.startMoving(this,event);' 
        onmouseup='mydragg.stopMoving(this);'>
        </div>
    </div>
</div>

的javascript

var mydragg = function(){
return {
  move : function(div,xpos){
    div.style.left = xpos + 'px';
  },
  startMoving : function(div,evt){
    evt = evt || window.event;
    var posX = evt.clientX,
        divLeft = div.style.left,
        eWi = parseInt(div.style.width = "200px"),
        cWi = parseInt(div.style.width = "200px");

    div.style.cursor='move';

    divLeft = divLeft.replace('px','');
    var diffX = posX - divLeft;
    document.onmousemove = function(evt){
      evt = evt || window.event;
      var posX = evt.clientX,
            aX = posX - diffX;
      if (aX < 0) aX = 0;
      if (aX > cWi) aX = cWi;

      mydragg.move(div,aX);
    }
  },
  stopMoving : function(container){
    var a = document.createElement('script');
    container.style.cursor='default';
    document.onmousemove = function(){}
  },
}   }();

为什么ClassName会破坏这段代码？

2 个答案: