javascript - オリジナルを複製するドラッグアンドドロップ

原文 javascript drag-and-drop clone

こんばんは、私はまだjQueryに慣れていません。次のコードを変更して、1つの要素がダブルクリックされるか#allFacetsから#userFacetsにドラッグされると複製されるようにし、#userFacetsでダブルクリックされると単に削除されるようにします。 。どうしてそうすることができるのでしょうか?

前もって感謝します !
(編集:投稿を編集して申し訳ありません。このウェブサイトにも慣れていません...)

ジャバスクリプト

$(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>
答え
helperオプションを使用して、ドラッグされているアイテムのクローンを表示し、受信イベントコールバックで、ドラッグされているアイテムのクローンを手動で追加し、並べ替えをキャンセルして、元の要素がそのまま残るようにします。ヘルパーオプションが「クローン」に設定されている場合、jQuery uiはドラッグされている元のオブジェクトを非表示にします。そのため、ドラッグ中に元の状態を維持したい場合は、開始イベントコールバック内に表示できます。

また、ダブルクリックのバインドにはイベント委任を使用して、後で追加されるアイテムを認識できるようにする必要があることにも注意してください。



$(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();
  });
});

.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;
}

<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>
関連記事

javascript - GetElementsByTagNamesとブロック表示

javascript - InDesignのMacOSで、Ractiveが入力で押されたすべてのキーをキャプチャしないのはなぜですか?

javascript - 3つの動的ドロップダウンに入力する

javascript - angularjs、tooltipster-mouseenterの問題

javascript - $ scopeの値をAngular JSで定義されている関数の外で取得する方法

javascript - JavaScriptとJqueryを使用した単純な製品フィルター

javascript - クリック時にCSSメニューを非表示にする

javascript - リダイレクトなしのOffice 365 OAuth

javascript - テキストボックスとドロップダウン値を追加する(数学)

javascript - JQGrid-「v4.3.2の新機能」イベントをバインドしようとして成功せず