问题
Hi I have this fiddle I get from jquery examples here
what it does basically is drag then drop the yellow box to pink division and clone the yellow box.
this is the html
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<div>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<div>
and the jquery is
$(function () {
$("#sortable").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
});
what I need to do is clone that yellow box by clicking on it
could anyone help me achieve this?
I'm new to frontend so please spare me.
thanks in advance
回答1:
Hope my understanding is correct, clicking on yellow box will append a clone to the sortable list and it will be sortable as well.
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
}).click(function() {
$(this).clone().appendTo($('#sortable'));
});
$( "ul, li" ).disableSelection();
});
DEMO
回答2:
Code, Here The Top " Drag me Down" is disable from drag. Only the cloned once's are draggable. And only the top yellow box is having click event to clone it.
$(function() {
$( "#sortable" ).sortable();
$('.ui-state-highlight').on('click',function(){
var $this =$(this);
$this.after($this.clone(false).attr('draggable','true'));
})
$( "ul, li" ).disableSelection();
$( "#sortable1").sortable({
items:'[draggable=true]',
connectWith: "#sortable"
});
});
回答3:
You can create the clone using this :
$('.ui-state-highlight').on('click',function(){
var $this =$(this);
$this.after($this.clone(false));
})
来源:https://stackoverflow.com/questions/21870841/how-to-initiate-clone-using-drag-drop-or-click-jquery