We Keep Coding

Incorporating the jQuery UI draggable into website using divs

I am trying to use the draggable jquery UI, however it doesn't work on my website. In the example that is given they have two ids, one called draggable and one called sortable. However in my website I only have one div called attraction. I have included the library and there are no errors, however it still isnt working.
This is a screen shot of the div structure within my webpage. Each div called attraction is the thing I want to be able to drag, and change order of each of these divs. Does anyone know how I can incorporate the jquery ui into this? This is my code below in the JS
$( function() {
$( "#attraction" ).sortable({
revert: true
});
$( "#attraction" ).draggable({
connectToSortable: "#attraction",
helper: "clone",
revert: "invalid"
});
$( "div" ).disableSelection();
} );
In the HTML I am adding the div attraction into this div below, but I am doing that by javascript.
<div id="itinerary_attractions" >
</div>
Would appreciate any help

jQuery UI dropover not always fired

I have a page with two DIVs, both of which are droppable. One of them (#droppable2) is initially hidden and is only shown when I hover the draggable item over the first DIV #droppable (with the dropover event). Example see here: http://codepen.io/anon/pen/AdLJr
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="droppable">Drop here 1</div>
<div id="droppable2" style="top: 300px; display: none;">Drop here 2</div>
<div id="draggable">Drag me</div>
<div id="log"></div>
JS:
$( "#draggable" ).draggable();
$( "#droppable,#droppable2" ).droppable({
drop: function() {
$('#log').html($('#log').html() + '<br>DROP');
},
over: function() {
$('#log').html($('#log').html() + '<br>over');
$('#droppable2').show();
}
});
However, when I now hover the draggable item over the second DIV, its dropover event is not fired like it should. Only when drop the draggable item and then pick it up again does it seem to work. The drop event already works on the first try though.
Any ideas what's causing this? I assume this might be a bug?

Ok here is an actual answer. Change your first JS line to this:
$( "#draggable" ).draggable({ refreshPositions: true });
From the jQuery UI draggable docs for the refreshPositions option:
If set to true, all droppable positions are calculated on every mousemove.
Caution: This solves issues on highly dynamic pages,
but dramatically decreases performance.

I also did it in that way with this line $( "#draggable" ).draggable({ refreshPositions: true });, but using a class draggable, but only works for once. I can only drag and drop for once one element. And if there is another element in the place where a droped they all don't work

jQuery UI draggable element dropped into sortable

I have a list of draggable items, and I wish to be able to drag them onto a sortable content block. Here’s my markup:
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
The thing is, that I want the dragged item to "become" a block as soon as the dragging starts and remain a block when it’s dropped. I have tried this:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
connectToSortable: ".content"
});
$('.content').sortable();​
Fiddle: http://jsfiddle.net/MF4qu/
But even if I create a custom helper that looks like a block, it reverts back to the original dragged element as soon as it’s dropped. Does anyone know how to properly insert a block in my example page? I already looked through the UI API but I can’t figure it out.
​

When the draggable element is dropped into sortable, it triggers the sortable update event. One solution is to listen to that event, and turn the dropped item into a block:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
connectToSortable: ".content"
});
$('.content').sortable({
update: function (event, ui) {
ui.item.addClass('block');
}
});​
Working demo: http://jsfiddle.net/DaXuT/1/

jQuery UI - dropped element -> from which div was it dragged

I have a problem with jQuery UI and get some information of a dropped item.
I have three areas on the screen:
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
In these areas, I put elements which are draggable with jQuery UI.
Now if an element is dropped from one to another area, I will not only get the area number in which the element is dropped to, I also want the area number where the element was dropped before the new drop.
I created a full working example: http://jsbin.com/iyaya3/
There is a blue draggable element and if I drag it from area1 to area2, I want to have the alert message with "dragged from area1 - dropped to area2".
How can this be done?
Best Regards, Tim-.

Hey, I updated your jsbin - http://jsbin.com/iyaya3/3
It works like this:
Take initial parent element's id and save it on draggable using jQuery.data
When dropping it on droppable, update data

I've got two ideas:
1) You can put a class or ID on the elements in each div:
<div id="area1"><node class="from1"></node></div>
<div id="area2"><node class="from2"></node></div>
<div id="area2"><node class="from2"></node></div>
And then test for that when you have the item
2) Write a function to do the clone instead of relying on the drag and drop to do it for you (http://ui-dev.jquery.com/demos/draggable/#option-helper) and then test for the parent and store that (in a singleton outside the scope of the dragger) where you can get it later.
I think I would prefer the first (even if you don't have html access to add these classes, just add it with javascript)

In your draggable setup, add this:
start: function(event,ui){
ui.helper.data('from-id', $(this).parent().attr('id') );
}
This will attach, as data, the ID of the container from which the element is being dragged.
Then, in the droppable, you can have:
alert( 'I was dragged from ' + ui.draggable.data('from-id') );
Here's the updated jsBin.
Edit: The start function creates a closure, so $(this).parent().attr('id') continues to point to the original parent. One solution to this problem (if you wish to keep a start function) is to clear start when the drag stops:
stop: function(event,ui){
ui.helper.draggable({ start: null });
}
This will allow the data methods in the droppable handlers to update the from-id without being immediately reverted to the original value by the start function.
Here's a revised jsBin example.

$(element.draggable).parent().attr('id')) works for me

I removed the duplicated code and solved the problem by saving the previous element id by the data() function.
JS Bin
<script type="text/javascript">
$(document).ready(function() {
$('#area1').append('<div class="shoulddraggable" style="width:100px;height:100px;top:0px;left:0px;background-color:blue;" data-elementid="100"></div>');
$(".shoulddraggable").draggable({
scroll: false,
revert: "invalid",
scope: "items",
});
$(".shoulddraggable").data('previousId', 'area1');
$('.droppable').droppable({
scope: "items",
drop: function(event, ui) {
alert('Previous container id: ' + ui.draggable.data('previousId'));
alert("Element: "+ui.draggable.data("elementid")+" dragged into" + $(this).attr('id'));
ui.draggable.data('previousId', $(this).attr('id'));
}
});
});
</script>
</body>
</html>

jQuery Drag plugin - Prevent dropping of a drag element on the top of another

I uses the jQuery pluins event.drag and event.drop
see a demo (just a reference question is not about restricting movement to a container)
Is it possible to prevent dropping of a drag element on the top of
another element? but it can be dragged over the other.

While you can accomplish what you want with the event.drag/drop script it is also easily done using jquery ui - draggable/droppable.
For the event., you need to return false if it meets yours criteria (or vice versa):
$('#drag1').drop("init",function(){
if ( $( this ).is('#badDiv') )
return false;
})
Here is the jquery ui version, it has a built in accept option in the $().droppable function - it accepts selectors also. This example is reverse of above. The above will let you move anywhere but badDiv, whereas this example below will won't let you move anywhere but the defined droppable:
script:
$("#drag1, #drag2").draggable({
revert: 'invalid'
});
$("#drop").droppable({
accept: '#drag1',
drop: function(event, ui) {
// whatever happens on drop
}
});
html:
<div id="drop" style="width:300px;height:300px;background:blue"></div>
<div id="drag1" style="width:50px;height:50px;background:green"></div>
<div id="drag2" style="width:50px;height:50px;background:yellow"></div>
This creates a big droppable area, but it will only accept the draggable ID of drag1. To see this effect you also need the option in your draggable for revert. This case I set it to invalid so the draggable will slide back to its original position if the drop is not valid.
I'm not sure of your exact application, but maybe this will point you in the right direction of what you're trying to accomplish.
I believe that the sorttables uses a similar setup, but that has more with appending divs and adjusting tables.

You can assign a valid drop target selector in this way.
$('.drag').drag(function( event, dd ){
// move the dragged element
},{ drop:'#drop1' }); // assign drop selector
You can also return some drop event handlers "false"
$('.drop').bind('dropinit drop',function( event, dd ){
if ( $( dd.drag ).is('#drag1') )
return false;
});