jquery перетаскиваемый элемент без списка в сортируемый список - PullRequest
Новая
       16

jquery перетаскиваемый элемент без списка в сортируемый список

2 голосов
/ 19 октября 2011

Это кажется тривиальным, но я все равно здесь.Код ниже представляет собой простое перетаскивание с сортируемым списком.То, что я хотел бы сделать, это сделать некоторую работу над вставленным элементом.В этом примере добавленный элемент - это div.Работа, которую я хотел бы сделать, - создать новый элемент списка с div внутри.

Любая помощь? 

<script>
$(function(){
    $(".sortable").sortable();
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
    }); 
}
</script>
<div class="draggable">DRAG ME</div>
<ul class="sortable">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
</ul>

Вот кое-что, что я также попробовал 

<script>
$(function(){
    $(".sortable").sortable({
        receive: function(event, ui) { 
            ui.item = $("<li></li>").append(ui.item);
        }
    });

    $('.sortable').droppable({
        drop: function(event, ui){
            ui.draggable = $("<li></li>").append(ui.draggable);
        }
    });
}
</script>

Ответы [ 2 ]

2 голосов
/ 19 октября 2011

Вам необходимо использовать событие stop на Сортируемом: 

$(".sortable").sortable({
   stop: function(event, ui)
   {
      if (ui.item.is('div.draggable'))
         ui.item.replaceWith($('<li>' + ui.item.text() + '</li>'));
   }
});

Справочник по обучению: stop событие

Аналогичный вопрос, который помог при поискеответ: Использование jQuery UI drag-and-drop: изменение перетаскиваемого элемента при перетаскивании

0 голосов
/ 19 октября 2011 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<style>
li {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
}
div {
    border: 1px solid #cfc;
    padding: 10px;
    width: 200px;
}
</style>
<title>Drag and Sort</title>
<script>
$(document).ready(function(){
   $(".sortable").sortable();
   $(".draggable").draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid",
        stop: function(event, ui){
            var content = $(this).html();
            $('ul.sortable>div').replaceWith($('<li />').html(content));
        }
    });
});
</script>
<body id="container">
    <div class="draggable">DRAG ME</div>
    <ul class="sortable">
        <li>ITEM 1</li>
        <li>ITEM 2</li>
        <li>ITEM 3</li>
        <li>ITEM 4</li>
    </ul>
</body>
...