목록의 요소를 별도의 블록으로 끌어서 놓기

목록의 요소를 별도의 블록으로 끌어서 놓기

---

이 사이트 에있는 것과 유사한 jQuery 구성 요소를 얻으려고합니다 .

기본적으로 여러 블록에 끌어서 놓을 수있는 사용 가능한 요소가있는 목록이 있습니다.

저는 자바 스크립트 개발 경험이 상당히 많지만 스크립트 작성을 원하는 언어 인 jQuery를 처음 접했습니다.

위에서 보여준 것과 유사한 예를 소개해 주시거나 이와 같은 것을 찾기 시작하기에 좋은 곳이 무엇인지에 대한 힌트를 주실 수 있습니까?

---

아마도 jQuery UI가 원하는 것을 수행 할 수 있습니다. 개체를 드래그, 드롭, 크기 조정, 정렬 가능하게 만드는 것과 같은 많은 편리한 도우미 기능으로 구성됩니다.

연결된 목록으로 정렬 가능을 살펴보십시오 .

---

이것을 확인하십시오 : http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/ 나는 이것을 사용하고 있으며 해결책에 만족합니다.

여기에서 데모를 찾을 수 있습니다 : http://demo.wil-linssen.com/jquery-sortable-ajax/

즐겨!

---

또한 확인

jQuery : 드래그 앤 드롭을 사용한 사용자 정의 레이아웃 (예제)

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

---

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 드래그 드롭 확인

---

 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. 이것은 여기에서 간단합니다. html 테이블을 끝에 div에 추가합니다.
2. we can achieve this or any thing with a simple concept of calling a JavaScript function when we want (here on drop.)
3. In this example you can drag & drop any number of tables, new table will be added below the last table exists in the div other wise it will be the first table in the div.
4. here we can add text between tables or we can say the section where we drop tables is editable we can type text between tables.

Thanks... :)

---

Dragging an object and placing in a different location is part of the standard of HTML5. All the objects can be draggable. But the Specifications of below web browser should be followed. API Chrome Internet Explorer Firefox Safari Opera Version 4.0 9.0 3.5 6.0 12.0

You can find example from below: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

참고URL : https://stackoverflow.com/questions/1452866/drag-and-drop-elements-from-list-into-separate-blocks