How can I deselect all the selected divs when I drag or click an unselected div. But it has to not apply to a selected div

huangapple
go评论66阅读模式
英文:

How can I deselect all the selected divs when I drag or click an unselected div. But it has to not apply to a selected div

问题

我一直在编写这个选择系统，允许我选择小部件并拖动它们，问题是，当我选择两个小部件并拖动未选中的小部件时，它们都会被拖动，我不希望发生这种情况。

应该发生的是，当我在未选中的小部件上放下鼠标时，所有选中的小部件都不再选中（这意味着移除了".selected"类）。问题是，我对如何仅应用于未选中的小部件感到困惑，它不应该应用于选中的小部件。

在我尝试之前的代码如下：

let isSelecting = false;
let selectionStartX, selectionStartY, selectionEndX, selectionEndY;
let selectionRectangle;
let draggedElements = [];
const widgets = document.querySelectorAll('.widgets');

document.addEventListener('mousedown', (event) => {
  if (event.target.classList.contains('widgets')) {
    draggedElements = Array.from(widgets).filter((widget) => widget.classList.contains('selected'));
    draggedElements.forEach((widget) => {
      const shiftX = event.clientX - widget.getBoundingClientRect().left;
      const shiftY = event.clientY - widget.getBoundingClientRect().top;

      function moveElement(event) {
        const x = event.clientX - shiftX;
        const y = event.clientY - shiftY;

        widget.style.left = x + 'px';
        widget.style.top = y + 'px';
      }

      function stopMoving() {
        document.removeEventListener('mousemove', moveElement);
        document.removeEventListener('mouseup', stopMoving);
      }

      document.addEventListener('mousemove', moveElement);
      document.addEventListener('mouseup', stopMoving);
    });

    return;
  }

  isSelecting = true;
  selectionStartX = event.clientX;
  selectionStartY = event.clientY;
  selectionRectangle = document.createElement('div');
  selectionRectangle.id = 'selection-rectangle';
  selectionRectangle.style.position = 'absolute';
  selectionRectangle.style.border = '2px dashed blue';
  selectionRectangle.style.pointerEvents = 'none';
  selectionRectangle.style.display = 'none';
  document.body.appendChild(selectionRectangle);

  // Remove selected class from squares
  widgets.forEach((widget) => {
    widget.classList.remove('selected');
  });
});

document.addEventListener('mousemove', (event) => {
  if (isSelecting) {
    selectionEndX = event.clientX;
    selectionEndY = event.clientY;

    let width = Math.abs(selectionEndX - selectionStartX);
    let height = Math.abs(selectionEndY - selectionStartY);

    selectionRectangle.style.width = width + 'px';
    selectionRectangle.style.height = height + 'px';
    selectionRectangle.style.left = Math.min(selectionEndX, selectionStartX) + 'px';
    selectionRectangle.style.top = Math.min(selectionEndY, selectionStartY) + 'px';
    selectionRectangle.style.display = 'block';

    widgets.forEach((widget) => {
      const widgetRect = widget.getBoundingClientRect();
      const isIntersecting = isRectangleIntersecting(widgetRect, {
        x: Math.min(selectionStartX, selectionEndX),
        y: Math.min(selectionStartY, selectionEndY),
        width,
        height,
      });
      if (isIntersecting) {
        widget.classList.add('selected');
      } else {
        widget.classList.remove('selected');
      }
    });
  }
});

document.addEventListener('mouseup', () => {
  if (isSelecting) {
    isSelecting = false;
    selectionRectangle.remove();
  }
});

document.addEventListener('mousedown', (event) => {
  if (!event.target.classList.contains('widgets') && event.target !== selectionRectangle) {
    // Remove selected class from squares
    widgets.forEach((widget) => {
      widget.classList.remove('selected');
    });
  }
});

function isRectangleIntersecting(rect1, rect2) {
  return (
    rect1.left >= rect2.x &&
    rect1.top >= rect2.y &&
    rect1.right <= rect2.x + rect2.width &&
    rect1.bottom <= rect2.y + rect2.height
  );
} // Make the DIV element draggable:
dragElement(document.getElementById("widget1"));
dragElement(document.getElementById("widget2"));
dragElement(document.getElementById("widget3"));

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (elmnt.id + "header") {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").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;
  }

  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;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

此代码实现了拖动小部件和选择小部件的功能，当鼠标按下未选中的小部件时，它会取消选中所有选中的小部件。希望这有助于你解决问题。

英文:

I've been coding this selection system that allows me to select widgets and drag a bunch of them, the problem is that when I select two widgets and I drag the other widget that's not selected, they're all being dragged, I don't want that to happen.

What is supposed to happen is that when I put my mouse down on a non-selected widget, all of the selected widgets have to not be selected anymore (that means the ".selected" class is removed). The problem is that I'm confused on how to apply this only to the non-selected widgets, it has to not apply to selected widgets.

Here is the code before I tried:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let isSelecting = false;
let selectionStartX, selectionStartY, selectionEndX, selectionEndY;
let selectionRectangle;
let draggedElements = [];
const widgets = document.querySelectorAll(&#39;.widgets&#39;);
document.addEventListener(&#39;mousedown&#39;, (event) =&gt; {
if (event.target.classList.contains(&#39;widgets&#39;)) {
draggedElements = Array.from(widgets).filter((widgets) =&gt; widgets.classList.contains(&#39;selected&#39;));
draggedElements.forEach((widgets) =&gt; {
const shiftX = event.clientX - widgets.getBoundingClientRect().left;
const shiftY = event.clientY - widgets.getBoundingClientRect().top;
function moveElement(event) {
const x = event.clientX - shiftX;
const y = event.clientY - shiftY;
widgets.style.left = x + &#39;px&#39;;
widgets.style.top = y + &#39;px&#39;;
}
function stopMoving() {
document.removeEventListener(&#39;mousemove&#39;, moveElement);
document.removeEventListener(&#39;mouseup&#39;, stopMoving);
}
document.addEventListener(&#39;mousemove&#39;, moveElement);
document.addEventListener(&#39;mouseup&#39;, stopMoving);
});
return;
}
isSelecting = true;
selectionStartX = event.clientX;
selectionStartY = event.clientY;
selectionRectangle = document.createElement(&#39;div&#39;);
selectionRectangle.id = &#39;selection-rectangle&#39;;
selectionRectangle.style.position = &#39;absolute&#39;;
selectionRectangle.style.border = &#39;2px dashed blue&#39;;
selectionRectangle.style.pointerEvents = &#39;none&#39;;
selectionRectangle.style.display = &#39;none&#39;;
document.body.appendChild(selectionRectangle);
// Remove selected class from squares
widgets.forEach((widgets) =&gt; {
widgets.classList.remove(&#39;selected&#39;);
});
});
document.addEventListener(&#39;mousemove&#39;, (event) =&gt; {
if (isSelecting) {
selectionEndX = event.clientX;
selectionEndY = event.clientY;
let width = Math.abs(selectionEndX - selectionStartX);
let height = Math.abs(selectionEndY - selectionStartY);
selectionRectangle.style.width = width + &#39;px&#39;;
selectionRectangle.style.height = height + &#39;px&#39;;
selectionRectangle.style.left = Math.min(selectionEndX, selectionStartX) + &#39;px&#39;;
selectionRectangle.style.top = Math.min(selectionEndY, selectionStartY) + &#39;px&#39;;
selectionRectangle.style.display = &#39;block&#39;;
widgets.forEach((widgets) =&gt; {
const widgetsRect = widgets.getBoundingClientRect();
const isIntersecting = isRectangleIntersecting(widgetsRect, {
x: Math.min(selectionStartX, selectionEndX),
y: Math.min(selectionStartY, selectionEndY),
width,
height,
});
if (isIntersecting) {
widgets.classList.add(&#39;selected&#39;);
} else {
widgets.classList.remove(&#39;selected&#39;);
}
});
}
});
document.addEventListener(&#39;mouseup&#39;, () =&gt; {
if (isSelecting) {
isSelecting = false;
selectionRectangle.remove();
}
});
document.addEventListener(&#39;mousedown&#39;, (event) =&gt; {
if (!event.target.classList.contains(&#39;widgets&#39;) &amp;&amp; event.target !== selectionRectangle) {
// Remove selected class from squares
squares.forEach((square) =&gt; {
square.classList.remove(&#39;selected&#39;);
});
}
});
function isRectangleIntersecting(rect1, rect2) {
return (
rect1.left &gt;= rect2.x &amp;&amp;
rect1.top &gt;= rect2.y &amp;&amp;
rect1.right &lt;= rect2.x + rect2.width &amp;&amp;
rect1.bottom &lt;= rect2.y + rect2.height
);
} // Make the DIV element draggable:
dragElement(document.getElementById(&quot;widget1&quot;));
dragElement(document.getElementById(&quot;widget2&quot;));
dragElement(document.getElementById(&quot;widget3&quot;));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (elmnt.id + &quot;header&quot;) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + &quot;header&quot;).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;
}
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;
// set the element&#39;s new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + &quot;px&quot;;
elmnt.style.left = (elmnt.offsetLeft - pos1) + &quot;px&quot;;
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}

<!-- language: lang-css -->

#selection-rectangle {
position: absolute;
border: 2px dashed blue;
pointer-events: none;
display: none;
z-index: 9999999;
}
.widgets.selected {
outline-color: blue;
outline-width: 2px;
outline-style: dashed;
}
#widget1 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget1header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}
#widget2 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget2header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}
#widget3 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget3header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}

<!-- language: lang-html -->

&lt;div id=&quot;widget1&quot; class=&quot;widgets&quot; style=&quot;left: 50px; top: 50px;&quot;&gt;
&lt;div id=&quot;widget1header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;widget2&quot; class=&quot;widgets&quot; style=&quot;left: 150px; top: 150px;&quot;&gt;
&lt;div id=&quot;widget2header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;widget3&quot; class=&quot;widgets&quot; style=&quot;left: 250px; top: 250px;&quot;&gt;
&lt;div id=&quot;widget3header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

在mousedown事件监听器上添加一个条件判断，以检查mousedown事件的目标元素是否是已选元素。如果是已选元素，移动所有已选元素；否则，从元素中移除selected类。

document.addEventListener('mousedown', (event) => {
  if (event.target.classList.contains('widgets')) {
    // 检查是否是已选元素
    draggedElements = Array.from(widgets).filter((widget) => widget.classList.contains('selected'));

    const draggingSelected = event.target.matches('.selected') || event.target.closest('.selected');
    draggedElements.forEach((widget) => {
      if (draggingSelected) {
        // 处理移动操作的代码
      } else {
        widget.classList.remove('selected');
      }
    });

    return;
  }

  // 其他代码...
});

请注意，这只是代码的一部分，完整的代码在上面的代码块中。如果需要更多帮助，请告诉我。

英文:

Have an if check on the mousedown event listener to see if the element on the mousedown is a selected element. If it is, move all selected elements, otherwise, remove the selected class from the elements.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

let isSelecting = false;
let selectionStartX, selectionStartY, selectionEndX, selectionEndY;
let selectionRectangle;
let draggedElements = [];
const widgets = document.querySelectorAll(&#39;.widgets&#39;);
document.addEventListener(&#39;mousedown&#39;, (event) =&gt; {
if (event.target.classList.contains(&#39;widgets&#39;)) {
draggedElements = Array.from(widgets).filter((widgets) =&gt; widgets.classList.contains(&#39;selected&#39;));
const draggingSelected = event.target.matches(&#39;.selected&#39;) || event.target.closest(&#39;.selected&#39;);
draggedElements.forEach((widgets) =&gt; {
if (draggingSelected) {
const shiftX = event.clientX - widgets.getBoundingClientRect().left;
const shiftY = event.clientY - widgets.getBoundingClientRect().top;
function moveElement(event) {
const x = event.clientX - shiftX;
const y = event.clientY - shiftY;
widgets.style.left = x + &#39;px&#39;;
widgets.style.top = y + &#39;px&#39;;
}
function stopMoving() {
document.removeEventListener(&#39;mousemove&#39;, moveElement);
document.removeEventListener(&#39;mouseup&#39;, stopMoving);
}
document.addEventListener(&#39;mousemove&#39;, moveElement);
document.addEventListener(&#39;mouseup&#39;, stopMoving);
} else {
widgets.classList.remove(&#39;selected&#39;);
}
});
return;
}
isSelecting = true;
selectionStartX = event.clientX;
selectionStartY = event.clientY;
selectionRectangle = document.createElement(&#39;div&#39;);
selectionRectangle.id = &#39;selection-rectangle&#39;;
selectionRectangle.style.position = &#39;absolute&#39;;
selectionRectangle.style.border = &#39;2px dashed blue&#39;;
selectionRectangle.style.pointerEvents = &#39;none&#39;;
selectionRectangle.style.display = &#39;none&#39;;
document.body.appendChild(selectionRectangle);
// Remove selected class from squares
widgets.forEach((widgets) =&gt; {
widgets.classList.remove(&#39;selected&#39;);
});
});
document.addEventListener(&#39;mousemove&#39;, (event) =&gt; {
if (isSelecting) {
selectionEndX = event.clientX;
selectionEndY = event.clientY;
let width = Math.abs(selectionEndX - selectionStartX);
let height = Math.abs(selectionEndY - selectionStartY);
selectionRectangle.style.width = width + &#39;px&#39;;
selectionRectangle.style.height = height + &#39;px&#39;;
selectionRectangle.style.left = Math.min(selectionEndX, selectionStartX) + &#39;px&#39;;
selectionRectangle.style.top = Math.min(selectionEndY, selectionStartY) + &#39;px&#39;;
selectionRectangle.style.display = &#39;block&#39;;
widgets.forEach((widgets) =&gt; {
const widgetsRect = widgets.getBoundingClientRect();
const isIntersecting = isRectangleIntersecting(widgetsRect, {
x: Math.min(selectionStartX, selectionEndX),
y: Math.min(selectionStartY, selectionEndY),
width,
height,
});
if (isIntersecting) {
widgets.classList.add(&#39;selected&#39;);
} else {
widgets.classList.remove(&#39;selected&#39;);
}
});
}
});
document.addEventListener(&#39;mouseup&#39;, () =&gt; {
if (isSelecting) {
isSelecting = false;
selectionRectangle.remove();
}
});
document.addEventListener(&#39;mousedown&#39;, (event) =&gt; {
if (!event.target.classList.contains(&#39;widgets&#39;) &amp;&amp; event.target !== selectionRectangle) {
// Remove selected class from squares
squares.forEach((square) =&gt; {
square.classList.remove(&#39;selected&#39;);
});
}
});
function isRectangleIntersecting(rect1, rect2) {
return (
rect1.left &gt;= rect2.x &amp;&amp;
rect1.top &gt;= rect2.y &amp;&amp;
rect1.right &lt;= rect2.x + rect2.width &amp;&amp;
rect1.bottom &lt;= rect2.y + rect2.height
);
} // Make the DIV element draggable:
dragElement(document.getElementById(&quot;widget1&quot;));
dragElement(document.getElementById(&quot;widget2&quot;));
dragElement(document.getElementById(&quot;widget3&quot;));
function dragElement(elmnt) {
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
if (elmnt.id + &quot;header&quot;) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + &quot;header&quot;).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;
}
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;
// set the element&#39;s new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + &quot;px&quot;;
elmnt.style.left = (elmnt.offsetLeft - pos1) + &quot;px&quot;;
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}

<!-- language: lang-css -->

#selection-rectangle {
position: absolute;
border: 2px dashed blue;
pointer-events: none;
display: none;
z-index: 9999999;
}
.widgets.selected {
outline-color: blue;
outline-width: 2px;
outline-style: dashed;
}
#widget1 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget1header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}
#widget2 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget2header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}
#widget3 {
position: absolute;
z-index: 9;
background-color: #ff0000;
color: white;
font-size: 25px;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #212128;
text-align: center;
width: 100px;
height: 100px;
}
#widget3header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #040c14;
outline-color: rgb(0, 0, 0);
outline-width: 2px;
outline-style: solid;
}

<!-- language: lang-html -->

&lt;div id=&quot;widget1&quot; class=&quot;widgets&quot; style=&quot;left: 50px; top: 50px;&quot;&gt;
&lt;div id=&quot;widget1header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;widget2&quot; class=&quot;widgets&quot; style=&quot;left: 150px; top: 150px;&quot;&gt;
&lt;div id=&quot;widget2header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;widget3&quot; class=&quot;widgets&quot; style=&quot;left: 250px; top: 250px;&quot;&gt;
&lt;div id=&quot;widget3header&quot; class=&quot;widgets&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 01:07:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76501693.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定