Jquery UI Draggable clone in same ul or div

StackOverflow https://stackoverflow.com/questions/23077950

Question

While implementing functionality of clone I found that the li is always created on the end and any li is created with only drag of another li without dropping into any particular position. I am unable to implement a li clone on the next of the mother help. Here are the reference I found and the demo as follows.

Referrences

how to initiate .clone using drag & drop or click jquery

javascript - how to make multiple draggable clones?

I am unable to run demo on the Jsfiddle so I am putting the whole code here.

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

  <style type="text/css">
    li {
    border:1px dashed Gainsboro;
    background-color:cornflowerblue;
    color:FloralWhite;
    font-family:Cursive;
    float:left;
    padding:8px;
    margin:2px;
}

ul {
    border:1px solid PowderBlue;
    min-height:50px;

}
  </style>



<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#list-A li').draggable({
    helper: 'clone'
});
$('#list-A ul').droppable({
    drop: function(event, ui) {
        if(ui.draggable.data('sorting'))
            return;
        $(this).append($(ui.draggable).clone());
    }
}).sortable({
    start: function(event, ui) {
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});
});//]]>  

</script>


</head>
<body style="cursor: auto;">
  <div id="list-A">
    <ul class="sortable2">
        <li class="ui-draggable">drag item 1</li>
        <li class="ui-draggable">drag item 2</li>
        <li class="ui-draggable">drag item 3</li>
        <li class="ui-draggable">drag item 4</li>
        <li class="ui-draggable">drag item 5</li>
        <li class="ui-draggable">drag item 6</li>
    </ul>
</div>

</body></html>
Was it helpful?

Solution

Assuming you would like it both Clone-able and Sort-able

$('#list-A ul').sortable({
    start: function(event, ui) {
        ui.helper.before(ui.helper.clone().attr('style',''));
        ui.item.data('sorting', true);
    },
    stop: function(event, ui) {
        ui.item.removeData('sorting');
    }
});

Example:

Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top