将带有事件处理程序的div附加到另一个div，用作在不使用JQuery的情况下进行拖动/调整大小的锚点

Question

我正在尝试创建一个不使用JQuery的程序，该程序会创建框，并允许用户从任何边缘/角落调整它们的大小，并在窗口周围拖动它们。这是我正在处理的代码：

拖动作品，并创建新盒子的作品。我在调整大小方面遇到很多麻烦。

var x = 1;
var elements = document.getElementsByClassName("box");
for (var i = 0; i < elements.length; i++) {
 enableDragging(elements[i]);
 //enableresizing(elements[i]);
 elements[i].innerHTML += "Box #"+x; //set the inner ID same as the tag seen by user
 var newID ="box"+x++; //set its tag for the user to see
 elements[i].id += newID; //set the inner ID same as the tag seen by user
 addListeners(elements[i]);

}

function addNew() {
 var divElement = document.createElement("div"); //create a new div
 divElement.tabIndex = -1; //set the tabIndex so that we can focus on the element
 divElement.innerHTML += "Box #"+x; //set the inner ID same as the tag seen by user
 var newID ="box"+x++; //set its tag for the user to see
 divElement.id += newID; //set the inner ID same as the tag seen by user
 divElement.class = "box";
 enableDragging(divElement); //enable dragging for new div
 //enableresizing(divElement); //enable resizing for new div
addListeners(divElement);
 document.body.appendChild(divElement); //append the new div to the document
 divElement.onchange = function() { 

 };
}


function enableDragging(ele) {
 var dragging = dragging || false,
   x,
   y,
   Ox,
   Oy,
   current;
   enableDragging.z = enableDragging.z || 1;


 ele.onmousedown = function(ev) {
   current = ev.target;
   dragging = true;
   x = ev.clientX;
   y = ev.clientY;
   Ox = current.offsetLeft;
   Oy = current.offsetTop;
   current.style.zIndex = ++enableDragging.z;
   current.focus();
   console.log(dragging);

   window.onmousemove = function(ev) {
     if (dragging == true) {
       var Sx = ev.clientX - x + Ox,
         Sy = ev.clientY - y + Oy;
       current.style.top = Sy + "px";
       current.style.left = Sx + "px";
       return false;
     }
   };
   window.onmouseup = function(ev) {
     dragging && (dragging = false);
   };
 };
}








function addListeners(currentElement){

var resizern = document.createElement('div');
resizern.className = 'resizer';
resizern.style.width = '10px';
resizern.style.height = '10px';
resizern.style.background = 'red';
resizern.style.position = 'absolute';
resizern.style.left = ((currentElement.style.width) / 2);
resizern.style.top = 0;
resizern.style.cursor = 'n-resize';
currentElement.appendChild(resizern);
resizeren.addEventListener('mousedown', initResize_n, false);

var resizerne = document.createElement('div');
resizerne.className = 'resizer';
resizerne.style.width = '10px';
resizerne.style.height = '10px';
resizerne.style.background = 'red';
resizerne.style.position = 'absolute';
resizerne.style.right = 0;
resizerne.style.top = 0;
resizerne.style.cursor = 'ne-resize';
currentElement.appendChild(resizerne);
resizerne.addEventListener('mousedown', initResize_n, false);
resizersw.addEventListener('mousedown', initResize_e, false);

var resizernw = document.createElement('div');
resizernw.className = 'resizer';
resizernw.style.width = '10px';
resizernw.style.height = '10px';
resizernw.style.background = 'red';
resizernw.style.position = 'absolute';
resizernw.style.left = 0;
resizernw.style.top = 0;
resizernw.style.cursor = 'nw-resize';
currentElement.appendChild(resizernw);
resizernw.addEventListener('mousedown', initResize_n, false);
resizersw.addEventListener('mousedown', initResize_w, false);

var resizers = document.createElement('div');
resizers.className = 'resizer';
resizers.style.width = '10px';
resizers.style.height = '10px';
resizers.style.background = 'red';
resizers.style.position = 'absolute';
resizers.style.left = (currentElement.style.width) / 2;
resizers.style.bottom = 0;
resizers.style.cursor = 's-resize';
currentElement.appendChild(resizers);
resizers.addEventListener('mousedown', initResize_s, false);

var resizersw = document.createElement('div');
resizersw.className = 'resizer';
resizersw.style.width = '10px';
resizersw.style.height = '10px';
resizersw.style.background = 'red';
resizersw.style.position = 'absolute';
resizersw.style.left = 0;
resizersw.style.bottom = 0;
resizersw.style.cursor = 'sw-resize';
currentElement.appendChild(resizersw);
resizersw.addEventListener('mousedown', initResize_s, false);
resizersw.addEventListener('mousedown', initResize_w, false);

var resizerse = document.createElement('div');
resizerse.className = 'resizer';
resizerse.style.width = '10px';
resizerse.style.height = '10px';
resizerse.style.background = 'red';
resizerse.style.position = 'absolute';
resizerse.style.right = 0;
resizerse.style.bottom = 0;
resizerse.style.cursor = 'se-resize';
currentElement.appendChild(resizerse);
resizerse.addEventListener('mousedown', initResize_s, false);
resizerse.addEventListener('mousedown', initResize_e, false);


var resizerw = document.createElement('div');
resizerw.className = 'resizer';
resizerw.style.width = '10px';
resizerw.style.height = '10px';
resizerw.style.background = 'red';
resizerw.style.position = 'absolute';
resizerw.style.left = 0;
resizerw.style.bottom = ((currentElement.style.height) / 2);
resizerw.style.cursor = 'w-resize';
currentElement.appendChild(resizerw);
resizerw.addEventListener('mousedown', initResize_w, false);

var resizere = document.createElement('div');
resizere.className = 'resizer';
resizere.style.width = '10px';
resizere.style.height = '10px';
resizere.style.background = 'red';
resizere.style.position = 'absolute';
resizere.style.right = 0;
resizere.style.top = ((currentElement.style.height) / 2);
resizere.style.cursor = 'e-resize';
currentElement.appendChild(resizere);
resizere.addEventListener('mousedown', initResize_e, false);

}

function initResize_n(e) {
 window.addEventListener('mousemove', Resize_n, false);
 window.addEventListener('mouseup', stopResize_n, false);
}

function Resize_n(e) { //resize height AND top value
 currentElement.style.top = e.clientY + 'px'; //change the top value to where the mouse stops
 currentElement.style.height = (currentElement.style.height - (e.clientY - currentElement.style.height)) + 'px';
}

function stopResize_n(e) {
 window.removeEventListener('mousemove', Resize_n, false);
 window.removeEventListener('mouseup', stopResize_n, false);
}


function initResize_s(e) {
 window.addEventListener('mousemove', Resize_s, false);
 window.addEventListener('mouseup', stopResize_s, false);
}

function Resize_s(e) { //CHANGE ONLY HEIGHT
 currentElement.style.height = (currentElement.style.height + (currentElement.style.height - e.clientY)) + 'px';
}

function stopResize_s(e) {
 window.removeEventListener('mousemove', Resize_s, false);
 window.removeEventListener('mouseup', stopResize_s, false);
}


function initResize_w(e) {
 window.addEventListener('mousemove', Resize_w, false);
 window.addEventListener('mouseup', stopResize_w, false);
}

function Resize_w(e) { //CHANGE LEFT VALUE AND WIDTH
 currentElement.style.width = (currentElement.style.width - e.clientX) + 'px';
 currentElement.style.left = e.clientX + 'px';
}

function stopResize_w(e) {
 window.removeEventListener('mousemove', Resize_w, false);
 window.removeEventListener('mouseup', stopResize_w, false);
}


function initResize_e(e) {
 window.addEventListener('mousemove', Resize_e, false);
 window.addEventListener('mouseup', stopResize_e, false);
}

function Resize_e(e) { //CHANGE ONLY WIDTH
 currentElement.style.width = (e.clientX - currentElement.style.left) + 'px';
}

function stopResize_e(e) {
 window.removeEventListener('mousemove', Resize_e, false);
 window.removeEventListener('mouseup', stopResize_e, false);
}

    <body>


<!--BEGIN BODY-->
<div id="drag" class = "box" tabindex="-1" style="top:100px;left:0px;"></div>


<div id="drag2" class = "box" tabindex="-1" style="top:100px;left:100px;width:300px;"></div>

<button onclick="addNew()">Add More</button>

<!--END BODY-->

html {
    background: #485354;


}

body {
    background-color: #485354;

}*{
    -webkit-user-select:none;
}


div{
    width: 100px;
    height: 100px;
    background:white;
    border:5px solid #aaa;
    display:inline-block;
    position:absolute;
}
div:active{
    cursor: all-scroll !;
    border-color:green !important;
}

div:focus{
    border-color:green;
}

div:hover{
    border-color:red;
}

div.resizer{




}

#element {
  position: absolute;
  overflow: hidden;
  background: green;
  height: 200px;
  width: 200px;
 }

任何帮助将不胜感激！

Answer 1

如果问题是正确的，可以更改div的尺寸，则可以直接使用CSS调整大小https://developer.mozilla.org/en-US/docs/Web/CSS/resize

示例代码：

document.querySelector('#my-div input[type=checkbox]').oninput=e=>
  {
    let onDiv = e.target.parentNode.parentNode
    if (e.target.checked )   onDiv.classList.add('onResize')
    else                     onDiv.classList.remove('onResize')
  }

html {
  background: #485354;
}

label,
label input[type=checkbox] {
  cursor: pointer;
  user-select: none;
}

#my-div {
  margin:1em;
  width: 200px;
  height: 200px;
  background-color: white;
  padding: 1em;
  border: 1px solid black;
  overflow: auto;
}
.onResize {
  resize: both;
}

<div id="my-div" >
  <label><input type="checkbox">rezise</label>
</div>

可能继续：How to detect DIV's dimension changed?