Develop Reference

How to change data attributes on drag and drop Jquery UI?

I made a jQuery function where the user can drag and drop divs. But I want to change their data attributes whenever users drag and drop them, eg-
<div data-num="1">one</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>
Whenever user drag div three and place it on the top then it should change its data attribute data-num="3" to data-num="1" and the div after it should change its data attribute to data-num=2 and so on according to their position
What I am Trying
jQuery( "#app" ).sortable({
update: function(a, b) {
parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);
}
});

To achieve your goal you can hook an event handler to the stop event of the sortable. Then you can loop through each child div in #app and update the data-num to match the index of the element. Try this:
jQuery($ => {
$("#app").sortable({
stop: () => {
$('#app > div').each((i, el) => $(el).data('num', i + 1));
}
});
// only for testing...
$('button').on('click', () => {
$('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="app">
<div data-num="1">One</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>
</div>
<button>Test</button>

we can also achieve this by using the item index
jQuery("#app").sortable({
update: function(e, ui) {
jQuery("#app div").each(function(i, elm) {
$elm = jQuery(elm);
var elindex = $elm.index("#app div");
$elm.attr("data-num", elindex+1);
});
}
});

JQuery - Cannot seem to bind event to dynamic DOM elements

Using JQuery UI Draggable, I am cloning elements as they leave an unordered list. As these are new to the DOM, i'm trying to use the JQuery On() method to bind an event which will show a hidden link. The anchor with the class cancel has display: none; in the css.
HTML
<ul class="current-campaign">
<li class="draggable">One <a class="pull-right cancel" href="#">
<i style="color:red">Icon</i>
</a>
</li>
</ul>
<ul class="new-campaign sortable"></ul>
JQuery
$(".sortable").sortable();
$(".draggable").draggable({
connectToSortable: ".sortable",
helper: "clone",
});
$(".current-campaign").on("mouseout", ".cancel", function () {
$(".cancel").show();
});
Really having trouble figuring out why the link doesn't show up when it leaves the unordered list. Here's a JS fiddle to see it in action.
http://jsfiddle.net/og937wy7/
FINAL EDIT WITH ANSWER
Armed with the knowledge of how to use the on() function, I fixed up my code so it's working as I intended.
$(document).on("mouseover", ".new-campaign", function (e) {
console.error($(this));
$(".new-campaign").find('.cancel').show();
});
http://jsfiddle.net/og937wy7/4/

You are attaching an event to .cancel, which is not at all in the view:
$(".current-campaign").on("mouseout", ".cancel", function () {
$(".cancel").show();
});
How can you mouseout, when .cancel doesn't have an area? Replace it with .draggable:
$(".current-campaign").on("mouseout", ".draggable", function () {
$(".cancel").show();
});
I guess you are looking for the cancel to be shown once you hover and when you come away, it should hide. So change your code to:
$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
$(".cancel").hide();
}).on("mouseover", ".draggable", function () {
$(".cancel").show();
});
I would also tell this is not a right way, because, it affects all the .cancel. So you might need to use $(this).find():
$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
$(this).find(".cancel").hide();
}).on("mouseover", ".draggable", function () {
$(this).find(".cancel").show();
});
Fiddle: http://jsfiddle.net/dpojx7so/
But, everything can be done using CSS itself!!!
You just need to add this CSS, instead of the whole JS:
.sortable:hover .cancel {
display: inline;
}
Fiddle: http://jsfiddle.net/mx58stx3/

Dynamically use the droppable function - jQuery UI

I am trying to create a drag and drop of elements. I have a piece of html in the main section:
<div class="dashboard_container ui-droppable">
<div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
<p>Plaats hier je element</p>
</div>
</div>
To drop and add a piece of html (generated by some variables with php) in between the div with id=div(number) I have the following JavaScript:
//Draggable part
$('.ab-nav-element').draggable({
appendTo: '.scroll-container',
revert: 'invalid',
cursor: "move",
distance: 50,
revertDuration: 250,
helper: 'clone',
start: function(){
$('.el-empty').addClass('el-receptive');
elementName = 'standard_columns';//$(this).attr('')
},
stop: function(){
$('.el-receptive').removeClass('el-receptive');
}
});
//Droppable part
var dropContent = '<div id="div2" ordering="0"></div><div class="ab-builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
}});
As you can see I use an AJAX call to update the content of the div.
Because I add content after, my new div's arent connected to the droppable event.
How am I able to bind the new div's to the droppable event?
The result is somewhat like this: http://jsfiddle.net/abayob/mws94soj/12/

Break your code out into functions:
var make_droppable = function($elements) {
$elements.droppable({
hoverClass : 'ui-hover',
drop: drop_function
});
}
var drop_function = function() {
var dropContent = '<div id="div2" ordering="0"></div><div class="ab- builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
// rebind new elements
make_droppable($('.el-empty'));
}
// call this for the first time.
make_droppable($('.el-empty'));

I misunderstood how droppable works.
In this part: "$('.el-empty').droppable({" I initialize the droppable.
The only thing I had to is create is a function that I call after the drop:
function dropreload () {$('.ab-builder-el').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
var divId = 2;
$('#div2').load("builder-loader.php",
{
elementname: elementName,
divId:divId
}
);
dropreload();
}})};
Call the function in between the $(document).ready({}) to initialize the droppable event for the first time. The rest is done after the drops.
I guess it was a long day :)

jQuery-ui droppable to sortable inside iframe

I have droppable elements in main frame, and sortable inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable
There is what I've done:
http://jsfiddle.net/w9L3eorx/1/
Inside iframe I have
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
<script>
$('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
});
</script>
The main frame
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<iframe src="frame.html" id="frame" width="800" height="800"></iframe>
<script>
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable: $('.content', $("#frame")[0].contentDocument)
});
</script>
I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9

Here you go:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable:$('#frame').contents().find('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
})
});
FIDDLE: http://jsfiddle.net/w9L3eorx/5/
Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave)

I have changed boszlo example to fit my needs:
I need first init sortable in iframe (my dropable sidebar will appear later after some clicks)
I need re-init sortable in parent (main) frame with connected dropable but with exact the same options.
http://jsfiddle.net/w9L3eorx/8/
So in iframe I have added function
window.destroySortableAndGetOptions = function (selector) {
var opts = $(selector).sortable('option');
$(selector).sortable('destroy');
return opts;
}
Which will destroy sortable and returns options.
And in my main frame before droppable init, I destroy sortable and take options
var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');
and re-init sortable with the same options
...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable.
I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.
See this for Demo Fiddle Link
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone();
}
});
What am I missing ?

There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:
stop : function(e, ui){
$('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
}
fiddle: http://jsfiddle.net/n10ucrLd/

I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:
HTML:
<div id="drag">Drag This</div>
<div class="container"></div>
JavScript:
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone(true);
}
});
$( ".container" ).droppable({
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
Live example: http://jsbin.com/vibeqaganu/1/edit?html,css,js,output