Я написал этот код для клонирования и перетаскивания элементов мыши при перемещении мыши, но каким-то образом я не могу этого достичь. Может кто-нибудь дать мне знать, что мне здесь не хватает. Я создал 3 div, которые могут быть динамическими c, и я использую Ctrl + щелчок левой кнопкой мыши, чтобы выбрать элементы, и когда я начинаю перетаскивать свою мышь, я клонирую элемент, а затем пытаюсь переместить клонированные элементы. Кроме того, я создал граничное условие, в котором я изменяю цвет границы элемента div.
Но я не могу перемещать клонированные элементы div с помощью мыши.
Вот мой код:
//Make the DIV element draggagle:
var divElement1 = document.getElementById("mydiv1");
var divElement2 = document.getElementById("mydiv2");
var divElement3 = document.getElementById("mydiv3");
//dragElement(document.getElementById("mydiv"));
//dragElement(document.getElementById("mydiv1"));
dragElement(divElement1);
dragElement(divElement2);
dragElement(divElement3);
divsArray = [];
divsArray.push(divElement1);
divsArray.push(divElement2);
divsArray.push(divElement3);
clickedElement = null;
collidedElement = null;
isClonned = false;
clonnedElement = null;
multipleSelectedElements = [];
previousLeft = 0;
previousTop = 0;
isPrevious = false;
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
offset = [
elmnt.offsetLeft - e.clientX,
elmnt.offsetTop - e.clientY
]
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
collidedElement = null;
var conatiner = document.getElementById("container");
let x = event.clientX + offset[0];
let y = event.clientY + offset[1];
// set the element's new position:
for (let element of multipleSelectedElements) {
if (!element.isClonned) {
createClone(element);
element.isClonned = true;
let container = document.getElementById("container");
container.append(clonnedElement);
clonnedElement.style.position = "absolute";
}
console.log("pos1 " + element.element.offsetLeft);
console.log("pos2 " + element.element.offsetTop);
}
if (!isPrevious) {
isPrevious = true;
previousLeft = elmnt.getBoundingClientRect().left;
previousTop = elmnt.getBoundingClientRect().top;
}
var offsetLeft = pos1 - previousLeft;
var offsetTop = pos2 - previousTop;
let cloDivArr = document.getElementsByClassName("draggable");
// set the element's new position:
for (var m = 0; m < cloDivArr.length; m++) {
console.log("offsetLeft " + offsetLeft);
console.log("offsetTop " + offsetTop);
let cloneDiv = cloDivArr[m].getBoundingClientRect();
cloDivArr[m].style.top = cloneDiv.top + offsetTop + "px";
cloDivArr[m].style.left = cloneDiv.left + "px";
previousLeft = cloDivArr[m].getBoundingClientRect().left;
previousTop = cloDivArr[m].getBoundingClientRect().top;
console.log("cloDivArr[m].style.top :" + cloDivArr[m].style.top);
console.log("cloDivArr[m].style.left :" + cloDivArr[m].style.left);
}
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
if (collidedElement != null && !collidedElement.contains(clickedElement)) {
clickedElement.style.position = "absolute";
clickedElement.style.left = '0px';
clickedElement.style.top = '0px';
collidedElement.style.position = "absolute";
collidedElement.appendChild(clickedElement);
}
//isClonned = true;
}
function createClone(ele) {
clonnedElement = ele.element.cloneNode(true);
//clonnedElement.id="clonnedEle";
clonnedElement.classList.add("draggable");
}
}
function selectMultiple(event) {
if (event.ctrlKey) {
this.multipleSelectedElements.push({
"element": event.target.parentElement,
"isClonned": false
});
} else {
for (let element of this.multipleSelectedElements) {
element.element.style.border = "1px solid #d3d3d3";
}
this.multipleSelectedElements = [];
}
if (this.multipleSelectedElements.length == 0) {
this.multipleSelectedElements.push({
"element": event.target.parentElement,
"isClonned": false
});
}
for (let element of this.multipleSelectedElements) {
element.element.style.border = "1px solid #ff0000";
}
console.log("this.multipleSelectedElements size :" + this.multipleSelectedElements.length);
}
#mydiv1,
#mydiv2,
#mydiv3 {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
border-color: gray;
width: 150px;
}
#mydiv1header,
#mydiv2header,
#mydiv3header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
<!DOCTYPE html>
<html>
<body>
<h1>Draggable DIV Element</h1>
<p>Click and hold the mouse button down while moving the DIV element</p>
<div id="container" style=" position: absolute;
height: 81%;
width: 99%;">
<div id="mydiv1" class="dragable A" onclick="selectMultiple(event);">
<div id="mydiv1header">DIV 1</div>
<p>Move 1</p>
<p>this 1</p>
<p>DIV 1</p>
</div>
<div id="mydiv2" class="dragable B" style="left:350px" onclick="selectMultiple(event);">
<div id="mydiv2header">DIV 2</div>
<p>Move 2</p>
<p>this 2</p>
<p>DIV 2</p>
</div>
<div id="mydiv3" class="dragable C" style="left:650px" onclick="selectMultiple(event);">
<div id="mydiv3header">DIV 3</div>
<p>Move 3</p>
<p>this 3</p>
<p>DIV 3</p>
</div>
</div>
</body>
</html>