I am building a menu planner Using JSQuery UI draggable and sortable.
Please take a look at the fiddle:
http://jsfiddle.net/mikepmtl/2fy9H/
<div class="day" id="Monday">
<div>Monday</div>
<div>Breakfast</div>
<ul class="mealtime sortable draggable" id="mon_breakfast"></ul>
<div>Lunch</div>
<ul class="mealtime sortable draggable" id="mon_lunch"></ul>
<div>Snack</div>
<ul class="mealtime sortable draggable" id="mon_snack"></ul>
</div>
<div class="day" id="Tuesday">
<div>Tuesday</div>
<div>Breakfast</div>
<div class="mealtime sortable draggable" id="tues_breakfast"></div>
<div>Lunch</div>
<div class="mealtime sortable draggable" id="tues_lunch"></div>
<div>Snack</div>
<div class="mealtime sortable draggable" id="tues_snack"></div>
</div>
//Drag and Drop
$(function () {
$(".sortable").sortable({
connectWith: "ul" ,
cursor: "pointer",
});
$(".draggable").draggable({
helper: "clone",
cursor: "pointer",
connectToSortable: ".sortable"
});
$('#trash').droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
});
});
If you add items from the food items into the menu under Tuesday for instance, you can then re-drag an item in Tuesday and drop it into Monday.
But you are not able to drop it on any other day.
But you any meal time on Monday will work.
I am completely puzzled.
Would anyone know why?
In your sortable setup, you have:
$(".sortable").sortable({
connectWith: "ul" ,
cursor: "pointer",
});
Notice the connectWith: "ul". That means you can drop onto other uls.
Here's Monday's markup:
<div class="day" id="Monday">
<div>Monday</div>
<div>Breakfast</div>
<ul class="mealtime sortable draggable" id="mon_breakfast"></ul>
<div>Lunch</div>
<ul class="mealtime sortable draggable" id="mon_lunch"></ul>
<div>Snack</div>
<ul class="mealtime sortable draggable" id="mon_snack"></ul>
</div>
Notice the sortables are uls.
Here's Tuesday's (and every other day's) markup:
<div class="day" id="Tuesday">
<div>Tuesday</div>
<div>Breakfast</div>
<div class="mealtime sortable draggable" id="tues_breakfast"></div>
<div>Lunch</div>
<div class="mealtime sortable draggable" id="tues_lunch"></div>
<div>Snack</div>
<div class="mealtime sortable draggable" id="tues_snack"></div>
</div>
The sortables are divs, not uls, so they won't accept the drops.
The easiest solution might actually be this:
$(".sortable").sortable({
connectWith: ".sortable" ,
cursor: "pointer",
});
http://jsfiddle.net/YTKMm/
Related
Let me give an example: I want to create colored div's by dragging them from the left list .draggable-colors to the right div #sortable.
HTML:
<div>
<ul class="draggable-colors" style="float:left;">
<li id="draggable-red">Red</li>
<li id="draggable-green">Green</li>
<li id="draggable-blue">Blue</li>
</ul>
<div id="sortable" style="float:right;">
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>
JS:
$("#sortable").sortable();
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("#draggable-green").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("#draggable-blue").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
So when I start dragging an item from the left list I want a colored div being dragged <div class="red"></div> and not an <li id="draggable-red">Red</li> so I can create colored div's.
How can I accomplish this using droppable and draggable?
EDIT 1:
What I need is something like this (whatToBeDragged):
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
whatToBeDragged: "<li id='draggable-red'>Red</li>"
});
EDIT 2:
Added a helper function to the draggable handler, it fixed the dragging issue but somehow it keeps creating list items and not colored divs. Anyone?
$("#draggable-red").draggable({
connectToSortable: "#sortable",
helper: "<li id='draggable-red'>Red</li>",
revert: "invalid"
});
I have jQuery's 1.6.4 draggable and droppable based on the answers from Stackoverflow post. Everything seem to work fine but I'm not able to remove the item from the droppable when you drag it out of the droppable area.
Please take a look at the JSfiddle: http://jsfiddle.net/tzp1560b/
Note I'm using ".live('mouseover',function(){" for draggable items as they are loaded via ajax.
HTML:
<div id="drop">
<div class="box">
<ol class="box_drop"><span class="drop-placeholder">Drop Items Here!</span></ol>
</div>
</div>
<div id="search_result">
<ul class="list-entity">
<li id="object-22684">
<div class="clearfix">
<div class="body">
<h4>9032</h4>
<div class="content"></div>
</div>
</div>
</li>
<li id="object-22684" class="ui-draggable">
<div class="clearfix">
<div class="body">
<h4>9033</h4>
<div class="elgg-content"></div>
</div>
</div>
</li>
</ul>
</div>
JQuery:
$(function () {
$('#search_result li').live('mouseover',function(){
$(this).draggable({
cursor: "move",
//revert: "invalid",
opacity: 0.8,
appendTo: "body",
helper: "clone",
start: function(event, ui) {
$(ui.helper).width($(this).width());
}
});
});
$("#drop ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
if (ui.draggable.is('.dropped')) return false;
$(this).find(".drop-placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this).draggable({
appendTo: "body",
helper: "clone"
}).addClass('dropped');
}
}).sortable({
items: "#drop ol",
sort: function () {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
},
out: function () {
ui.item.remove();
$(this).remove();
}
});
});
Can anyone help?
Thank you.
Use
$(ui.draggable).remove(); in the drop event to remove the element
http://jsfiddle.net/tzp1560b/1/
Good day all.
I have a simple interface, with 3 "zones". A list of elements that the user has, a place where the user can drag the elements he has and can sort them, and a place where the user can drag any element and if this element is from the second group, the element is deleted.
this is what I've done so far:
<div class="col-md-12">
<h1 id="trash" style="background:#f00;">drop here to delete (trash)</h1>
</div>
<div class="col-md-12">
<h1>take your elements from here (library)</h1>
<div class="group">
<ul class="playlists">
<li class="mymedia" data-id="1453">element 0</li>
<li class="mymedia" data-id="6565">element 1</li>
<li class="mymedia" data-id="1222">element 2</li>
<li class="mymedia" data-id="8888">element 3</li>
</ul>
</div>
</div>
<div class="col-md-12">
<h1>drop here your elements, and sort them (playlist)</h1>
<div class="group">
<ul class="playlists droppable" style="background:#777; min-height:30px;">
</ul>
</div>
</div>
and the javascript:
$('.droppable').sortable();
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.remove();
}
});
https://jsfiddle.net/peorthyr/dfvxt8g7/
what i'm missing is a little tricky. I want that only the elements dropped into the playlist are deletable (by now, dragging any element into the trash, will delete it), while the elements into the "library" aren't deletable, but only draggable into the playlist. I've tryed this, but with no luck:
$('.droppable').sortable({
drop: function (event, ui) {
ui.draggable.addClass("deletable");
}});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.hasClass("deletable").remove();
}
});
what i'm mistaking? may I ask you help on this?
You could handle it adding a class and remove only element getting this class, e.g:
$('.droppable').sortable({
stop: function (event, ui) {
ui.item.addClass('dropped');
}
});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
if (!ui.draggable.hasClass('dropped')) return false;
ui.draggable.remove();
}
});
-jsFiddle-
I'm currently trying to create a drag and drop, with sortable list items... But when I'm moving the draggable item towards the placeholder, it just returns to it's place. Any ideas what I'm doing wrong?
I found this method here, but it doesn't seem to work for me.
Here is my HTML:
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<ul id="dropzone" class="items">
<li class="placeholder"></li>
</ul>
And this is the jQuery:
$(function() {
$("#draggable li.to-drag").draggable({
connectWith: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").droppable({
drop: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
Thanks for the help! :)
EDIT
This is the working jQuery:
$(function() {
$("#dropzone").sortable({
revert: true,
opacity: 0.5
});
$("#draggable li").draggable({
connectToSortable: ".items",
helper: "clone",
revert: true,
opacity: 0.5
});
$("li.placeholder").droppable({
revert: false,
drop: function (event, ui) {
var dragging = ui.draggable.clone();
$(this).append(dragging);
}
});
$("ul, li").disableSelection();
});
You've got at least three major problems:
Draggable doesn't have connectWith, it has connectToSortable.
So you should change this. See doc:
http://api.jqueryui.com/draggable/
To use connectToSortable, you need a sortable, not at
droppable.
You'll need to change drop event for a sortable event, receive
maybe or update, depending on what you need.
http://api.jqueryui.com/sortable/
It could look like this:
$(function() {
$("#draggable li.to-drag").draggable({
connectToSortable: "#dropzone",
helper: "clone",
revert: "invalid",
droppable: "drop"
});
$("#dropzone").sortable({
receive: function( event, ui) {
$(this).addClass("correct");
}
});
$("ul, li").disableSelection();
});
Please see the changes I have made
$(function() {
$("#draggable li.to-drag").draggable({
appendTo: "body",
helper: "clone",
revert:"invalid"
});
$("#dropzone1").droppable({
drop:function( event, ui) {
alert(ui.draggable.text())
$("#dropzone").text( ui.draggable.text() ).appendTo( this );
}
});
$("ul, li").disableSelection();
});
The additional div ensures you are dragging on to the right panel
<ul id="draggable">
<li class="to-drag" class="items">
<h1>1</h1>
<p>Description 1</p>
</li>
<li class="to-drag" class="items">
<h1>2</h1>
<p>Description 2</p>
</li>
<li class="to-drag" class="items">
<h1>3</h1>
<p>Description 3</p>
</li>
</ul>
<div style="height: 100px; clear: both;"></div>
<div id="dropzone1" style="border:solid 1px">
<ul id="dropzone" class="items" >
<li class="placeholder"></li>
</ul>
</div>
Requires some tweaking to get some additional functionality but you should be able to do this
you will need additional code to do the sorting
Check out this link here
Cheers
Truez
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.