So I have an unordered list of draggables that I want to drag into another unordered list of droppables. If I clone the draggable and append it to "body", then I can drag it out of its container and drop it on the droppable elements in the other list, but it does not automatically scroll through the droppable unordered list. If I clone and append to the other unordered list, then it will automatically scroll the droppable list, but the element is not visible when dragging until it is hovering over the droppable list. Does anyone know of a workaround or a better approach to this problem?
Fiddle with code here: https://jsfiddle.net/bkfxjnom/6/
Draggable code:
$('.draggable').draggable({
helper: 'clone',
appendTo: "body",
zIndex: 100,
refreshPositions: true,
revert: 'invalid',
start: function(event, ui) {
$(this).css('visibility', 'hidden');
},
stop: function(event, ui) {
$(this).css('visibility', 'visible');
}
});
Droppable list html:
<ul class="list-group" id="root" style="overflow-y:scroll; height: 150px">
<li class="list-group-item category-droppable" id="level1">
<span class="glyphicon glyphicon-chevron-right"></span>FirstLvL
<ul class="list-group" id="level1">
<li class="list-group-item category-droppable" id="level2">
<span class="glyphicon glyphicon-chevron-right"></span>SecondLvL
<ul class="list-group" id="level2">
<li class="list-group-item category-droppable" name="A" id="level3">A</li>+++ many li elements
</ul>
</li>
</ul>
</li>
</ul>
Thanks in advance!
So the workaround I ended up using for this was to append the clone to the container I wanted to be scrollable, as well as containing it there.
Then I made another clone that I offset on drag with the mouse, of which is positioned absolutely. Sort of a hacky solution, but it works.
$('.draggable').draggable({
scrollSensitivity: 35,
scrollSpeed: 28,
containment: "#root",
helper: "clone",
appendTo: "#root",
zIndex: 5000,
refreshPositions: true,
start: function (event, ui) {
parent = $(this);
$(this).css('visibility', 'hidden');
$(ui.helper).css('visibility', 'hidden');
clone = $(this).clone();
clone.addClass("ui-draggable-dragging");
clone.css('visibility', 'visible');
clone.css("position", "absolute");
clone.css("z-index", 5001);
clone.prependTo($(".dragging-area"));
$("#unprocessed_list").droppable("disable");
},
stop: function (event, ui) {
clone.animate($(this).offset(), 500);
setTimeout(function () { clone.remove(); parent.css('visibility', 'visible'); }, 500);
$("#unprocessed_list").droppable("enable");
},
drag: function (event, ui) {
clone.offset({ top: event.pageY - clone.height(), left: event.pageX - clone.width()/2 });
}
});
Related
I'm facing a trouble with droppable/draggable plugin of Jquery UI.
If I have two elements, not-nested, but overlapped due to css structure, the drop function is thrown for both elements.
How can I prevent to the background element to get the drop?
This is an example:
https://jsfiddle.net/vq4x0b8L/2/
HTML
<div id="contenitore">
<div id="carrello">
<p>Drop here</p>
</div>
<div id="carrello2">
<p>Drop here</p>
</div>
<div id="fagioli">
<p>Drag me</p>
</div>
</div>
JS
$(function() {
$( "#fagioli" ).draggable();
$( "#carrello" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
$( "#carrello2" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
});
CSS
#contenitore {position: relative; width: 500px; height: 500px;}
#carrello {background: #ccc;width:400px;height:500px;}
#carrello2 {background: #ddd; width:300px;height:250px; position: absolute; bottom: 0px;}
#fagioli {background: #822222;width:70px;height:90px;position: absolute; top: 200px; right: 10px;}
#fagioli:hover {cursor:move}
I tried the "greedy" option, but it doesn't work, probably it is designed for nested elements.
I found a way to do it.
Example: https://jsfiddle.net/Twisty/dezt5bmf/10/
JavaScript
$(function() {
$("#fagioli").draggable();
$("#carrello").droppable({
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
}
});
$("#carrello2").droppable({
tolerance: "touch",
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
$("#carrello").droppable("option", "accept", "*");
},
over: function(event, ui) {
$("#carrello").droppable("option", "accept", ".snowflake");
}
});
});
When the Draggable is Over the 2nd droppable, we adjust the accept option to something that is not the draggable element. This way when drop happens, it is not interested in it. Once the dropped is performed, we can switch it back to accept all items.
You can also disable the dropables, yet this causes additional Styles to be applied. Changing the accept does not.
I am using JQuery UI for drag and drop in my project.
On the draggable element, I have Bootstrap (3.x) tooltip.
Moving the mouse over the draggable shows the tooltip.
I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.
Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/
<div id="draggable" class="ui-widget-content">
<div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Here is javascript code:
$(function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
//this is what I hope to work, but not working!
$(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
},
helper: 'clone',
revert: "invalid"
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$('[data-toggle="tooltip"]').tooltip({
'animation': true,
'placement': 'bottom'
});
});
Thanks for any help!
You can hide you tooltip child element.
Code:
$( "#draggable" ).draggable({
start: function(event, ui) {
$(ui.helper).find('.tooltip').hide();
},
helper: 'clone',
revert: "invalid"
});
Demo: http://jsfiddle.net/9RwHh/
Why not just use
start: function(ev, ui){
$('.tooltip').remove();
}
At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.
I want gp_item should be sortable and when drag and drop under gp_delete area gp_item should get deleted.
When I did, it either working sorting or deleting. Both not working together.
<div id='container_gp'>
<div id='1' class='gp_item'> Graph 1</div>
<div id='2' class='gp_item'> Graph 2</div>
<div id='3' class='gp_item'> Graph 3</div>
</div>
<div id='gp_delete'>Drop to delete here </div>
I have written like that.
$('.gp_item').draggable({
revert: true,
proxy:'clone'
});
$("#gp_delete").droppable({
activeClass: "active",
drop: function(event, ui) {
if(confirm("Are you sure you wish to delete"))
{
//delete code
ui.draggable.remove();
}
}
});
I modified a bit your code and now works, the trick is to set the draggable and sortable features on the container not on single elements:
$('#container_gp').sortable({revert: 100}).draggable({
revert: 'invalid',
proxy: 'clone'
}).disableSelection()
$("#gp_delete").droppable({
activeClass: "active",
hoverClass: "ui-state-highlight",
accept: '#container_gp div',
drop: function (event, ui) {
if (confirm("Are you sure you wish to delete")) {
ui.draggable.remove();
}
}
});
Working fiddle: http://jsfiddle.net/ckWKE/2/
I am trying to implement the click of the first item of the selectable list.I can add the CSS
but unable to get the click event working when i try to pre select the first item (I need the click since ,onclick event has an ajax call to populate related information on another div..)
I even tried to use the the trigger method , but couldnt get this working on the fist item on the list. The code is standard stuff.
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<ol>
Jquery function
$(function() {
$( "#selectable" ).bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
selected: function(event, ui) {
alert("selected");
},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
I can apply the css to the first list item like this
$('li:first-child').select().addClass("ui-selected");
But i cant get the click function to work (The click would invoke the 'selected' anonymous call back.) Any pointers would be helpful/.
After some trying i managed to get it working.Posting the solution as it may be useful.
I want to simulate the mouse click on the first item on the selectable list.For that we first need to bind
$( "#selectable" ).bind( "selectableselected", function(event, ui) {
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
alert("test");
});
});
Once you do that we need to fire the click.I put this in the create callback which is called as soon as the selectable is formed.
create: function(event, ui) {
setTimeout( function() {
$('li:firstchild').addClass("uiselected").trigger('selectableselected');
}, 100 );
the great thing about Jquery is that its so intutive.
I have a list:
<ul id="selector">
<li id="1">One</li>
<li id="2">Two</li>
</ul>
and then I have:
$("#selector li").draggable({
revert: "valid"
});
$("#xyz tr").droppable({
drop: function(event, ui) {
console.log(ui.draggable.text());
}
});
Q: How do I determine that it was id=1 or id=2 that was dropped?
The text property is giving me "One" or "Two", but I need "1" or "2".
Use this method:
ui.draggable.attr('id')