javascript - 如何实现javascript拖动项

Question

我有一些代码在我的网站上不起作用，但在我在其他地方测试时起作用。此外，在我的站点上，元素重复了两次，但在测试中却没有。我尝试通过文本小部件实现，然后将代码放在实际页面上。问题是

1. 重复元素
2. 这些词应该是可拖动的，但不是。
3. 故障小部件区域

桌面

https://codepen.io/adsler/pen/bGEbzxP

var dragItem;
var container = document.querySelector("#container");
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {
  dragItem = e.target;
  if (dragItem.xOffset == undefined) {
    dragItem.xOffset = 0;
  }

  if (dragItem.yOffset == undefined) {
    dragItem.yOffset = 0;
  }

  if (e.type === "touchstart") {
    initialX = e.touches[0].clientX - dragItem.xOffset;
    initialY = e.touches[0].clientY - dragItem.yOffset;
  } else {
    initialX = e.clientX - (dragItem.xOffset || 0);
    initialY = e.clientY - (dragItem.xOffset || 0);
  }

  console.log(initialX);
  console.log(initialY);

  //    if (e.target === dragItem) {
  active = true;
  //  }

}

function dragEnd(e) {
  active = false;
}

function drag(e) {
  if (active) {
    e.preventDefault();

    if (e.type === "touchmove") {
      currentX = e.touches[0].clientX - initialX;
      currentY = e.touches[0].clientY - initialY;
    } else {
      currentX = e.clientX - initialX;
      currentY = e.clientY - initialY;
    }

    dragItem.xOffset = currentX;
    dragItem.yOffset = currentY;
    setTranslate(currentX, currentY, dragItem);
  }
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

#container {
  width: 100%;
  height: 400px;
  background- color: white;
  display: flex;
  align- items: center;
  justify- content: center;
  overflow: hidden;
  border- radius: 7px;
  touch- action: none;
}

.container div {
  width: 100px;
  height: 0px;
  background- color: transparent;
  border: 0px solid rgba(136, 136, 136, 0.5);
  border- radius: 50%;
  touch- action: none;
  user- select: none;
  text-align: center;
}

.container div:active {
  background- color: white;
}

.container div:hover {
  cursor: pointer;
  border- width: 0px;
}

#gd {
  background-color: yellow;
}

#websites {
  background-color: blue;
}

#Identity {
  background-color: #ff0af3;
}

<div id="outerContainer">
  <div id="container">
    <div>
      <div id="gd">Hello&nbsp;and</div>
      <div>
        <div id="websites">welcome</div>
        <div>
          <div id="Identity">to 4309</div>
        </div>
      </div>
    </div>
  </div>
</div>

最后决定在主页（它是一个 WordPress 站点）上实现代码，小部件区域似乎出现故障，但现在根本没有出现。我有几个containers所以container改成container6. 没用。尝试删除DOCTYPE and html标签，因为页面已经有DOCTYPE，我会调用它两次。没用。通常我通过文本小部件实现主页更改，但主页代码实现也应该工作。

标签： javascripthtmlcss