Question

晚上好，我还不习惯jQuery，并且我想修改以下代码，以便在双击或从#allFacets拖动到#userFacets时克隆一个元素，但在#conets中双击时只是被删除＃ userFacets ...怎么可能这样做？

提前致谢！（编辑：抱歉编辑我的帖子，我不习惯这个网站......）

JAVASCRIPT

$(function () {
    $('#allFacets, #userFacets').sortable({
        connectWith: 'ul',
        placeholder: 'placeholder',
        delay: 150
    }).disableSelection().dblclick(function (e) {
        var item = e.target;
        if (e.currentTarget.id === 'allFacets') {
            $(item).clone({
                $(item).appendTo($('#userFacets')).fadeIn('slow');
            });
        } else {
            $(item).fadeOut('fast', function () {
                $(item).appendTo($('#allFacets')).fadeIn('slow');
            });
        }
    });
});

CSS：

  .facet-container{
  width: 330px;
  }
  .right {
  float: right;
  }
  .left {
  float: left;
  }
  p {
  clear: both;
  padding-top: 1em;
  }
  .facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
  }
  .facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  }
  .facet-list li.placeholder {
  height: 1.2em
  }
  .facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
  }
  .facet.ui-sortable-helper {
  opacity: 0.5;
  }
  .placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
  }

HTML：

<html>
<head>

<meta charset="UTF-8">

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>

<script>
    window.console = window.console || function(t) {};
    window.open = function(){ console.log('window.open is disabled.'); };
    window.print = function(){ console.log('window.print is disabled.'); };
    // Support hover state for mobile.
    if (false) {
        window.ontouchstart = function(){};
    }
    </script>

  </head>


  <body>

    <div class="facet-container">
    <div class="left">
      <label>All Facets</label>
      <ul id="allFacets" class="facet-list">
        <li class="facet">Facet 2</li>
        <li class="facet">Facet 3</li>
        <li class="facet">Facet 5</li>
        <li class="facet">Facet 1</li>
        <li class="facet">Facet 4</li>
      </ul>
    </div>
    <div class="right">
      <label>User Facets</label>
      <ul id="userFacets" class="facet-list">

      </ul>
    </div>
  </div>
  <p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>

</body>
</html>

Answer 1

您可以使用helper选项显示正在拖动的项目的克隆，并在接收事件回调中，手动附加正在拖动的项目的克隆并取消排序，以便原始元素将保留在地点。如果帮助选项设置为＆＃34; clone＆＃34;，则jQuery ui将隐藏原始被拖动的内容。因此，如果您想在拖动过程中保持原始图像可见，则可以在开始事件回调中显示它。

另请注意，您应该使用事件委派来绑定双击，以便识别将来附加的项目。

＆＃13;

$(function() {
  $('#allFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    start: function(e, ui) {
      ui.item.show(); // force jquery ui to display the original
    }
  });
  $('#userFacets').sortable({
    connectWith: 'ul',
    delay: 150,
    helper: "clone",
    placeholder: 'placeholder',
    receive: function(e, ui) {
      ui.item.clone().appendTo(this); // append a copy
      ui.sender.sortable("cancel"); // return the original
    }
  }).on("dblclick", "li", function() {
    $(this).remove();
  });
});

＆＃13;

.facet-container {
  width: 330px;
}
.right {
  float: right;
}
.left {
  float: left;
}
p {
  clear: both;
  padding-top: 1em;
}
.facet-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
  min-height: 1.5em;
  font-size: 0.85em;
}
.facet-list li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}
.facet-list li.placeholder {
  height: 1.2em
}
.facet {
  border: 1px solid #bbb;
  background-color: #fafafa;
  cursor: move;
}
.facet.ui-sortable-helper {
  opacity: 0.5;
}
.placeholder {
  border: 1px solid orange;
  background-color: #fffffd;
}

＆＃13;

<link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<div class="facet-container">
  <div class="left">
    <label>All Facets</label>
    <ul id="allFacets" class="facet-list">
      <li class="facet">Facet 2</li>
      <li class="facet">Facet 3</li>
      <li class="facet">Facet 5</li>
      <li class="facet">Facet 1</li>
      <li class="facet">Facet 4</li>
    </ul>
  </div>
  <div class="right">
    <label>User Facets</label>
    <ul id="userFacets" class="facet-list">

    </ul>
  </div>
</div>
<p>Drag & drop to rearrange items within a list or between lists.</br>Double-click to move item from one list to the bottom of the other.</p>

＆＃13;

拖放克隆原始文件

1 个答案: