Ex:
<div class="droppable">
<div class="except_this_div"></div>
</div >
I have a jquery ui droppable event for the above example in which the drop should not happen for
$('.droppable').droppable({});
I need to exclude the droppable only for <div class="except_this_div"></div>
You can accomplish this by using the jquery ui draggable revert function.
HTML
<div class="droppable">
<div class="except_this_div"></div>
</div>
<div class="draggable">
JQuery
var revert;
$('.droppable').droppable({
drop: function( event, ui ){
revert = false;
}
});
$('.except_this_div').droppable({
greedy: true
});
$('.draggable').draggable({
revert: function(){
return revert;
},
start: function(){
revert = true;
}
});
Fiddle:
https://jsfiddle.net/qL0tb12h/2/
Related
This is probably a simple question, but how can I replace the thing I am dragging with html from an ajax call?
So, if the draggable items are just 'text' items (as below in the html snippet), and when I drag the thing I use a 'image' via the helper method, how can I 'on drop' not use either of them but insert the html as returned from a ajax call.
Where do I make the call (btw, using the 'input-type' value to the ajax call to get the correct html)?
How to I prevent the default 'dragged item' from being inserted? I.e. I don't want the div put in or the helper method image....
Do I need to add like a droppable or do I do this in the sortable on like the received event (kind of works, can't remove image but from help method)??? (I have been trying both, and whilst the ajax call worked and I get the data etc, given that I don't know how to prevent the default stuff being dropped I am not sure 'what' I am replacing with the 'result' from the call...)
$("#desktoplayout").sortable({
receive: function (event, ui) {
$(this).append('<div>html from ajax call</div>'); // kind of works... but the image from the 'helper method' on the 'draggable' is still there.
}
}); // A sortable list of stuff into which things are dragged.
var input-type;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function (event, ui) {
input-type = $(this).find('.preview').data("input-type");
},
drag: function(e, t) {
},
stop: function(e, t) {
}
});
and
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
Update
This seems to do what I wanted... is calling remove on the helper the correct way of doing this?
receive: function(event, ui) {
ui.helper.remove();
var $this = $(this);
$.get("somewhere", function(data) {
// Note: presume more logic here.....
$($this).append(data);
});
}
Here is a working example of one solution:
https://jsfiddle.net/Twisty/zh9szubf/
HTML
<div id="draggableItems">
<div class="item">
<div class="preview" data-input-type="1">
TEXT
</div>
</div>
</div>
<ul id="desktoplayout">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JQuery
$(function() {
$("#desktoplayout").sortable({
receive: function(event, ui) {
var newItem;
$.post("/echo/html/", {
html: "<li class='newItem'>From Ajax</li>"
}, function(data) {
ui.helper.replaceWith(data);
});
}
});
var inputType;
$("#draggableItems .item").draggable({
connectToSortable: "#desktoplayout",
helper: function (event) {
return "<div class='item'><img src='/Images/Header.png' /></div>";
},
start: function(event, ui) {
inputType = ui.helper.find('.preview').data("input-type");
}
});
});
This will work with $.get() too, but for the example, it had to be $.post(). Basically, whatever you want top be the result, That code should be in the ui.helper.replaceWith() section.
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 would like to do the following:
1. tab-1 is selected when page load at first time
2. After clicking tab-2, form is submitted and page need to stay on the tab-2
I have tested two code snippets. However, both of them have errors (see at below):
<form id="target">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</form>
code 1-
It works with point2 and doesn't work with point 1
<script>
$(function() {
var $tabs = $('#tabs').tabs();
$tabs.tabs( "option", "selected", 1 );
$('#tabs-B').click(function() {
$('#target').submit();
});
});
</script>
code 2-
It works with point1, but form doesn't submit after clicking tab-2
var $tabs = $('#tabs').tabs();
$('#tabs-B').click(function() {
$('#target').submit(function() {
$tabs.tabs( "option", "selected", 1 );
});
});
use the [select][1] method
$( "#tabs" ).tabs({
select: function(event, ui) {
var data = $("#from1").serialize();
console.log(data);
// submit the for via ajax here
/*$.post("/path",{data:data},function(){
//clear the form fields or what ever you want to do
});*/
}
});
http://jsfiddle.net/5RMxZ/16/
I'm looking to use jQuery UI Sortable + Draggable + Droppable with the same items. I'd like to sort all .item elements and be able to drag and drop an .item into another. Below is my code:
<script>
$(function() {
$("#wrapper").sortable({
items: ".item",
stop: function(event, ui) {
// save new sort order
}
});
$(".item").draggable({
helper: ".clone",
connectToSortable: "#wrapper"
}).disableSelection().droppable({
accept: ".slide",
drop: function(event, ui) {
// dropping .item into another .item
}
});
});
</script>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
When I use sortable + draggable + droppable, only one or the other works not all of them together. What am I missing to achieve this?
Thanks!
I'm not sure I entire understand what you are trying to say. If you are just trying to sort the items in your list with drag and drop, you don't need the .draggable and .droppable.
http://jsfiddle.net/Earendil/saQwr/
If you are trying to drop one item element into another, let me know and I'll see if I can get that working and post an updated fiddle for it.