Question

我尝试创建一个带有可拖动项目的导航栏。它有效，但似乎没有移动效果（幽灵效果）尽管添加了＆＃34; effectAllowed＆＃34;属性。我怎样才能做到这一点？

＆＃13;

class Sortable {
  constructor(el) {
    this.rootEl = el;
    this.onInit();
  }
  onInit() {
    // add draggable attribute = true to every li
    Array.from(this.rootEl.children).forEach((childEl) => {
      childEl.draggable = true;
    });

    this.rootEl.addEventListener('dragstart', (e) => {
      console.log(e.target.parentNode);
      // we dont need the a tag but the li tag
      this.dragEl = e.target.parentNode;

      e.dataTransfer.setData('text', this.dragEl.textContent);
      e.dataTransfer.effectAllowed = 'move';
      e.target.classList.add("no-hover");

      this.rootEl.addEventListener('dragover', this.onDragOver.bind(this), false);
      this.rootEl.addEventListener('dragend', this.onDragEnd.bind(this), false);

    }, false);
  }

  onDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    var target = e.target.parentNode;
    if (target && target !== this.dragEl && e.target.nodeName == 'A') {
      console.log(1111)
      this.rootEl.insertBefore(this.dragEl, target.nextSibling || target);
    } else {
      console.log(target, this.dragEl, e.target.nodeName)
    }
  }
  onDragEnd(e) {
    e.preventDefault();
    e.target.classList.add("no-hover");
    this.rootEl.removeEventListener('dragover', this.onDragOver.bind(this), false);
    this.rootEl.removeEventListener('dragend', this.onDragEnd.bind(this), false);
  }
}

// initialize the js
new Sortable(document.getElementById("nav-tabs-routes"));

＆＃13;

a.no-hover {
  background-color: transparent!important;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<ul id="nav-tabs-routes" class="nav nav-tabs nav-tabs-routes">
  <li id="link1">
    <a class="active" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Sales</a>
  </li>

  <li id="link2">
    <a href="#"><i class="fa fa-barcode" aria-hidden="true"></i> Skus</a>
  </li>

  <li id="link3">
    <a href="#"><i class="fa fa-file" aria-hidden="true"></i> Import/Export Data</a>
  </li>

  <li id="link4">
    <a href="#"><i class="fa fa-asterisk" aria-hidden="true"></i> Locations</a>
  </li>

  <li id="link5">
    <a href="#"><i class="fa fa-th-large" aria-hidden="true"></i> Stations</a>
  </li>
</ul>

＆＃13;

我还将代码推送到codepen：the sortable list

如何使一个可拖动的元素看起来像＆＃34;移出＆＃34;什么时候被拖？

0 个答案: