Драгула показывает положение падения при наведении на элемент

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>