javascript - 让 dragula 在悬停在元素上时显示放置位置

Question

我有一个与 dragula 一起使用的拖放功能，因此它创建元素以将元素作为子元素放入其中。这个想法是您可以让任何元素成为一个容器来容纳子项。

我遇到的问题是，在将可拖动元素悬停之前，我不希望放置位置可见。在页面周围拖动元素时，它会呈现所有父容器 - 但我真的只希望在将鼠标悬停在可以创建它的位置上时出现。少量项目不是什么大问题，但当您有 100 多个项目时，它会导致页面变大并且非常不和谐。

下面是我到目前为止所得到的。非常感谢任何帮助!

var drake;

function setupDragula() {


  var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));

  var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));

  var opts = {
    allowNestedContainers: true
  };
  opts = {
    accepts: function(el, target, source, sibling) {
      // prevent dragged containers from trying to drop inside itself
      return !contains(el, target);
    }
  };

  drake = dragula(
    containers,
    opts
  ).on('drag', function(el) {
    prepareEmptyDropZones();
    el.classList.remove('ex-moved');
  }).on('drop', function(el, container, source) {
    el.classList.add('ex-moved');
    removeEmptyDropZones();
  }).on('cancel', function(el, container, source) {
    removeEmptyDropZones();
  }).on('over', function(el, container) {
    container.classList.add('editing');
    el.classList.add('el-over');
  }).on('out', function(el, container) {
    container.classList.remove('editing');
    el.classList.remove('el-over');
  });
}

function contains(a, b) {
  return a.contains ?
    a != b && a.contains(b) :
    !!(a.compareDocumentPosition(b) & 16);
}

function prepareEmptyDropZones() {
  var item = querySelectorAllArray(".js-structure-item");

  item.forEach(function(el) {
    var firstParent = el.querySelector('.js-structure-parent');

    if (firstParent === null) {
      //el.classList.add('empty');
      var emptyParent = document.createElement('div');
      emptyParent.className = "js-structure-parent";
      //emptyParent.classList.add('empty-drop-zone');
      el.appendChild(emptyParent);
    } else {
      el.classList.remove('empty');
    }
  });
  resetContainers();
}

function removeEmptyDropZones() {
  var dropZones = querySelectorAllArray(".js-structure-parent");
  dropZones.forEach(function(dropZone) {
    if (dropZone.children.length == 0) {
      dropZone.remove();
    }
  });
}

function resetContainers() {
  drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}

function querySelectorAllArray(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}


document.addEventListener("DOMContentLoaded", function(event) {
  setupDragula();
});

.js-structure-item {
  cursor: move;
}

.js-structure-item .container {
  margin-bottom: 10px;
}


/*parent*/

.js-structure-parent {
  padding: 0px 0px 0px 30px;
  /*border: 1px solid red;
        position: relative;*/
}

.js-structure-parent:empty,
.empty-drop-zone {
  min-height: 20px;
  border: 1px dashed #ccc;
}

.el-over {
  background-color: green;
}

.js-structure-item.empty {
  color: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>

<div class="js-structure-parent">
  <div class="js-structure-item">
    <div class="container">
      File Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          File 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Image Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Image file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Document folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Document file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 4
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

var drake;

function setupDragula() {


  var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));

  var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));

  var opts = {
    allowNestedContainers: true
  };
  opts = {
    accepts: function(el, target, source, sibling) {
      // prevent dragged containers from trying to drop inside itself
      return !contains(el, target);
    }
  };

  drake = dragula(
    containers,
    opts
  ).on('drag', function(el) {
    prepareEmptyDropZones();
    el.classList.remove('ex-moved');
  }).on('drop', function(el, container, source) {
    el.classList.add('ex-moved');
    removeEmptyDropZones();
  }).on('cancel', function(el, container, source) {
    removeEmptyDropZones();
  }).on('over', function(el, container) {
    container.classList.add('editing');
    el.classList.add('el-over');
  }).on('out', function(el, container) {
    container.classList.remove('editing');
    el.classList.remove('el-over');
  });
}

function contains(a, b) {
  return a.contains ?
    a != b && a.contains(b) :
    !!(a.compareDocumentPosition(b) & 16);
}

function prepareEmptyDropZones() {
  var item = querySelectorAllArray(".js-structure-item");

  item.forEach(function(el) {
    var firstParent = el.querySelector('.js-structure-parent');

    if (firstParent === null) {
      //el.classList.add('empty');
      var emptyParent = document.createElement('div');
      emptyParent.className = "js-structure-parent";
      //emptyParent.classList.add('empty-drop-zone');
      el.appendChild(emptyParent);
    } else {
      el.classList.remove('empty');
    }
  });
  resetContainers();
}

function removeEmptyDropZones() {
  var dropZones = querySelectorAllArray(".js-structure-parent");
  dropZones.forEach(function(dropZone) {
    if (dropZone.children.length == 0) {
      dropZone.remove();
    }
  });
}

function resetContainers() {
  drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}

function querySelectorAllArray(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}


document.addEventListener("DOMContentLoaded", function(event) {
  setupDragula();
});

.js-structure-item {
  cursor: move;
}

.js-structure-item .container {
  margin-bottom: 10px;
}


/*parent*/

.js-structure-parent {
  padding: 0px 0px 0px 30px;
  /*border: 1px solid red;
        position: relative;*/
}

.el-over {
  background-color: green;
}

.js-structure-item.empty {
  color: #666;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.js-structure-parent:empty,
.empty-drop-zone {
  min-height: 6px;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>

<div class="js-structure-parent">
  <div class="js-structure-item">
    <div class="container">
      File Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          File 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Image Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Image file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Document folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Document file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 4
        </div>
      </div>
    </div>
  </div>
</div>

试试这个:::

var drake;

function setupDragula() {


  var containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));

  var item = Array.prototype.slice.call(document.querySelectorAll(".js-structure-item"));

  var opts = {
    allowNestedContainers: true
  };
  opts = {
    accepts: function(el, target, source, sibling) {
      // prevent dragged containers from trying to drop inside itself
      return !contains(el, target);
    }
  };

  drake = dragula(
    containers,
    opts
  ).on('drag', function(el) {
    prepareEmptyDropZones();
    el.classList.remove('ex-moved');
  }).on('drop', function(el, container, source) {
    el.classList.add('ex-moved');
    removeEmptyDropZones();
  }).on('cancel', function(el, container, source) {
    removeEmptyDropZones();
  }).on('over', function(el, container) {
    container.classList.add('editing');
    el.classList.add('el-over');
  }).on('out', function(el, container) {
    container.classList.remove('editing');
    el.classList.remove('el-over');
  });
}

function contains(a, b) {
  return a.contains ?
    a != b && a.contains(b) :
    !!(a.compareDocumentPosition(b) & 16);
}

function prepareEmptyDropZones() {
  var item = querySelectorAllArray(".js-structure-item");

  item.forEach(function(el) {
    var firstParent = el.querySelector('.js-structure-parent');

    if (firstParent === null) {
      //el.classList.add('empty');
      var emptyParent = document.createElement('div');
      emptyParent.className = "js-structure-parent";
      //emptyParent.classList.add('empty-drop-zone');
      el.appendChild(emptyParent);
    } else {
      el.classList.remove('empty');
    }
  });
  resetContainers();
}

function removeEmptyDropZones() {
  var dropZones = querySelectorAllArray(".js-structure-parent");
  dropZones.forEach(function(dropZone) {
    if (dropZone.children.length == 0) {
      dropZone.remove();
    }
  });
}

function resetContainers() {
  drake.containers = Array.prototype.slice.call(document.querySelectorAll(".js-structure-parent"));
}

function querySelectorAllArray(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}


document.addEventListener("DOMContentLoaded", function(event) {
  setupDragula();
});

.js-structure-item {
  cursor: move;
}

.js-structure-item .container {
  margin-bottom: 10px;
}


/*parent*/

.js-structure-parent {
  padding: 0px 0px 0px 30px;
  /*border: 1px solid red;
        position: relative;*/
}

.el-over {
  background-color: green;
}

.js-structure-item.empty {
  color: #666;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>

<div class="js-structure-parent">
  <div class="js-structure-item">
    <div class="container">
      File Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          File 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          File 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Image Folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Image file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Image file 4
        </div>
      </div>
    </div>
  </div>
  <div class="js-structure-item">
    <div class="container">
      Document folder
    </div>
    <div class="js-structure-parent">
      <div class="js-structure-item">
        <div class="container">
          Document file 1
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 2
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 3
        </div>
      </div>
      <div class="js-structure-item">
        <div class="container">
          Document file 4
        </div>
      </div>
    </div>
  </div>
</div>