web-dev-qa-db-ja.com

リストから要素を個別のブロックにドラッグアンドドロップします

このサイト に似たjQueryコンポーネントを取得しようとしています。

基本的に、いくつかのブロックにドラッグアンドドロップできる使用可能な要素のリストがあります。

私はかなりのJavaScript開発経験がありますが、私はこれをスクリプト化する言語であるjQueryを初めて使用します。

上に示したものに似た例に私を導いてくれますか、またはこのようなものを探し始めるのに適した場所についてのヒントを教えてください。

jquerydrag-and-drop
63
titel

たぶんjQuery UIはあなたが探していることをするでしょう。オブジェクトをドラッグ可能、ドロップ可能、サイズ変更可能、ソート可能にするなど、多くの便利なヘルパー関数で構成されています。

接続リストでソート可能 をご覧ください。

78
Thorbjørn Hermansen

これをチェックしてください： http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ I 'これを使用してm、私は解決策に満足しています。

ここでデモを見つけることができます： http://demo.wil-linssen.com/jquery-sortable-ajax/

楽しい！

8
Marcio Mangar

それも確認してください

jQuery：ドラッグアンドドロップを使用したカスタマイズ可能なレイアウト（例）

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/

8
PHP Ferrari

JQueryUIのドラッグ/ドロップを確認するためのテストコードをいくつか作成しました。この例は、コンテナから要素をドラッグして別のコンテナにドロップする方法を示しています。

マークアップ

<div class="row">
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 1</h1>
        </div>
        <div id="container1" class="panel-body box-container">
          <div itemid="itm-1" class="btn btn-default box-item">Item 1</div>
          <div itemid="itm-2" class="btn btn-default box-item">Item 2</div>
          <div itemid="itm-3" class="btn btn-default box-item">Item 3</div>
          <div itemid="itm-4" class="btn btn-default box-item">Item 4</div>
          <div itemid="itm-5" class="btn btn-default box-item">Item 5</div>
        </div>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Panel 2</h1>
        </div>
        <div id="container2" class="panel-body box-container"></div>
      </div>
    </div>
  </div>

JQueryコード

$(document).ready(function() {

$('.box-item').draggable({
    cursor: 'move',
    helper: "clone"
});

$("#container1").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("itemid");
    $('.box-item').each(function() {
      if ($(this).attr("itemid") === itemid) {
        $(this).appendTo("#container1");
      }
    });
  }
});

$("#container2").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("itemid");
    $('.box-item').each(function() {
      if ($(this).attr("itemid") === itemid) {
        $(this).appendTo("#container2");
      }
    });
  }
});

});

CSS-

.box-container {
    height: 200px;
}

.box-item {
    width: 100%;
    z-index: 1000
}

プランカーを確認してください JQuery Drag Drop

7
Newton Sarker
 function dragStart(event) {
            event.dataTransfer.setData("Text", event.target.id);
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            $("#maincontainer").append("<br/><table style='border:1px solid black; font-size:20px;'><tr><th>Name</th><th>Country</th><th>Experience</th><th>Technologies</th></tr><tr><td>  Bhanu Pratap   </td><td> India </td><td>  3 years   </td><td>  Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...</td></tr></table>");
        }
 .droptarget {
            float: left;
            min-height: 100px;
            min-width: 200px;
            border: 1px solid black;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        [contentEditable=true]:empty:not(:focus):before {
            content: attr(data-text);
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
        <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag Table</p>
    </div>

    <div id="maincontainer" contenteditable=true data-text="Drop here..." class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  1. これはここでは簡単です。最後にdivにhtmlテーブルを追加しています
  2. 必要なときにJavaScript関数を呼び出すという簡単なコンセプトでこれを実現できます（ここではドロップします）。
  3. この例では、任意の数のテーブルをドラッグアンドドロップできます。新しいテーブルは、divに存在する最後のテーブルの下に追加され、それ以外の場合はdivの最初のテーブルになります。
  4. ここで、テーブル間にテキストを追加したり、テーブルをドロップするセクションを編集可能にしたり、テーブル間にテキストを入力したりできます。 enter image description here

ありがとう... :)

2
Bhanu Pratap

オブジェクトをドラッグして別の場所に配置することは、HTML5の標準の一部です。すべてのオブジェクトをドラッグ可能にすることができます。ただし、以下のWebブラウザの仕様に従う必要があります。 API Chrome Internet Explorer Firefox Safari Operaバージョン4.0 9.0 3.5 6.0 12.0

以下から例を見つけることができます： https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

1
Debojyoti Mahapatra