主页 / 问题 / 979333
Accepted
Дмытрык
Asked:2020-05-08 19:33:56 +0000 UTC2020-05-08 19:33:56 +0000 UTC

拖放时更改光标

  • 772

我遇到了一个问题 - 在移动结束之前，不会应用光标更改。需要帮助决定。

const base = document.getElementById('base');
const items = base.children;
let dragElement;
setListeners(items);

function handlerDragstart(event) {
  const target = event.target;
  target.style.cursor = 'move';
  dragElement = target;
}

function handlerDrop(event) {
  const target = event.target;
  base.insertBefore(dragElement, target);
  // dragElement.style.cursor = 'grab';
}

function setListeners(arrNodes) {
  for (let i = 0; i < arrNodes.length; i++) {
arrNodes[i].addEventListener('dragstart', handlerDragstart);
arrNodes[i].addEventListener('dragover', handlerDragOver);
arrNodes[i].addEventListener('drop', handlerDrop);
  }
}

function handlerDragOver(event) {
  event.preventDefault();
}
body{
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#base{
  height: 100%;
  width: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.item{
  width: 70px;
  height: 70px;
  border: 1px solid blue;
  margin-bottom: 10px;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="base">
  <div class="item" draggable="true">0</div>
  <div class="item" draggable="true">1</div>
  <div class="item" draggable="true">2</div>
  <div class="item" draggable="true">3</div>
  <div class="item" draggable="true">4</div>
  <div class="item" draggable="true">5</div>
  <div class="item" draggable="true">6</div>
</div>

javascript

1 个回答

  1. Best Answer

    在拖放过程中，您不能放置任何光标。

    根据文档，只能是以下值：

    • copy- 在新位置制作源项目的副本。
    • move- 一个项目被移动到一个新的位置。
    • link- 在新位置建立到源的链接。

    const base = document.getElementById('base');
const items = base.children;
let dragElement;
setListeners(items);

function handlerDragstart(event) {
  const target = event.target;
  dragElement = target;
}

function handlerDrop(event) {
  const target = event.target;
  base.insertBefore(dragElement, target);
}

function setListeners(arrNodes) {
  for (let i = 0; i < arrNodes.length; i++) {
    arrNodes[i].addEventListener('dragstart', handlerDragstart);
    arrNodes[i].addEventListener('dragover', handlerDragOver);
    arrNodes[i].addEventListener('drop', handlerDrop);
  }
}

function handlerDragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'link'; // ставим тип курсора
}
    body {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#base {
  height: 100%;
  width: 50%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.item {
  width: 70px;
  height: 70px;
  border: 1px solid blue;
  margin-bottom: 10px;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div id="base">
  <div class="item" draggable="true">0</div>
  <div class="item" draggable="true">1</div>
  <div class="item" draggable="true">2</div>
  <div class="item" draggable="true">3</div>
  <div class="item" draggable="true">4</div>
  <div class="item" draggable="true">5</div>
  <div class="item" draggable="true">6</div>
</div>

    • 2

相关问题