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
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
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"
});
});
You can create the clone using this :
$('.ui-state-highlight').on('click',function(){
var $this =$(this);
$this.after($this.clone(false));
})
Related
I try to append some data before sortable start event. Here is my example
<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>
Js code
$( "#sortable" ).sortable({
revert: true,
forcePlaceholderSize: true,
placeholder: "ui-state-highlight",
start: function( event, ui ) {
$(ui.item).append("<div>abc<br><br>abc</div>");
}
});
And when i drag Item 1 it look like
But i want append data before start to make placeholder resize. But maybe jquery ui not has that event. jHow can i do that thank.
Here is my example.
First, you have to reset list element’s height, then you have to apply its new height to the placeholder element. The code:
$(function() {
$('#sortable').sortable({
revert: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
start: function(event, ui) {
// we don’t want jQuery’s 20px
ui.item.height('auto');
ui.item.append('<div>abc<br><br>abc</div>');
// now set the new height to the placeholder
$(ui.placeholder[0]).height(ui.item.height());
}
});
});
I'm working with Drag and Drop tutorial from HTML Rocks. The current tutorial basically does a switch of the dragged element and the element it is dropped on. What was in point A goes to point B and point B goes to point A.
|A|B|C| --> |B|A|C|
|D|E|F| |D|E|F|
I'm trying to change this logic. If I drag point E, it should be in between the others.
|A|B|C| --> |A|E|B|
|D|E|F| |C|D|F|
This is the demo I have for this.
Should this be done changing the property dropEffect or it will be necessary to create a new div for adding the item we're moving?
function handleDragStart(e) {
this.style.opacity = '0.4'; // this / e.target is the source node.
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
I found the way to do this thanks to #tbirell
I'm using the Jquery UI library for this and change all the logic of what I did at the beginning
Instead of using DIV, I'm replacing them by UL and LI
<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>
<li class=" ui-state-default">Item 6</li>
</ul>
The library is the one that manages the logic of this.
$( function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
A link of the working demo.
In Jquery UI using sortable and selectable, i drag the element it shows the id of the dragged element using selectable.(using two field while i drag one element and to drop it in other .it shows the id of the dragged element)
Here is the html code.
<span>You've selected:</span> <span id="select-result">none</span>
<ul id="sortable1" class="connectedSortable">
<li ><img src="./images/tirein.png"><span>tier 1</span></li>
<li><img src="./images/tirein.png"><span>tier 2</span></li>
<li><img src="./images/tirein.png"><span>tier 3</span></li>
</ul>
<ul id="sortable2" class="connectedSortable">
</ul>
here is the Jquery.
$(function() {
$( "#sortable1a, #sortable2a" ).sortable({
connectWith: ".connectedSortable"
});
$("#sortable1, #sortable2" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#sortable1 li" ).index( this );
result.append("image" + ( index + 1 )+ " has moved" );
});
}
});
});
I'm using jQuery sortable plugin
I have two blocks connected one is draggable and the other is only sortable.
What I want to do is when I'm dragging an item from the sortable in to a specific div to remove it.
Here's the markup:
<div>Draggable source items
<ul>
<li class="draggable" class="ui-state-highlight">Drag me down</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
<li class="draggable" class="ui-state-highlight">Drag me down 2</li>
</ul>
</div>
<div>Sortable List 1
<ul class="sortableList">
</ul>
</div>
<div class="test">
<!--IF YOU DRAG THE ITEM fROM THE SORTABLE LIST HERE IT WILL REMOVE IT -->
</div>
JS:
(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
Here is a jsfiddle
how about this?
$('.droppableArea').droppable({
accept: 'li',
drop: function(event, ui) {
ui.helper.remove();
}
});
I marked your droppable DIV with 'droppableArea' class. See fiddle for details.
I have two connected sortables in jQuery. They're called sortable1 and sortable2. When you take an element out of sortable2, you put it into sortable1. The user shouldn't be able to move the element back into sortable2 after dragging has started (a clone is being made to fill the void.) So once dragging has commenced it, how can one keep it from going back into sortable2 while still having full functionality in sortable1?
Thanks for any help in advance!
Here is the script:
<script>
$(function() {
$( "#sortable1" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$('.ui-state-highlight').click(function(){
if ($(this).parent().attr("id")!="sortable2") {
$(this).remove();
}
});
$( "#sortable2" ).sortable({
connectWith: ".connectedSortable",
helper: function(e,li) {
copyHelper=li.clone(true,true).insertAfter(li);
return li.clone(true,true);
}
}).disableSelection();
});
</script>
And here is the snippet of html behind the lists:
<div id="symbolbay">
<p>Drop symbols here</p>
<ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Click me to delete only me</li>
<li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>
The connectWith paramter is a one way relationship as documented here:
http://api.jqueryui.com/sortable/#option-connectWith
So simply specifying #sortable2 connects with #sortable1 but leaving the parameter in #sortable1 blank would do the trick.
Something like:
$(function() {
$( "#sortable2" ).sortable({
connectWith: "#sortable1"
})
$( "#sortable1" ).sortable({
})
});
http://jsfiddle.net/69vPK/2/
$(function() {
$( "#sortable2" ).sortable({
connectWith: "#sortable1"
}).disableSelection();
});
try this