Develop Reference

select2 multiple select drag and drop saving

I am using select2 to select related tours / posts on our WordPress powered website, which works fine, however, I would like to have an option to manually drag and drop the selected values to change their order.
I've found a snippet online
$(".select2").select2();
var formData=[];
$("ul.select2-selection__rendered").sortable({
containment: 'parent',
stop: function(event, ui) {
formData=[];
var _li= $('li.select2-selection__choice');
_li.each(function(idx) {
var currentObj=$(this);
var data=currentObj.text();
data=data.substr(1,data.length);
formData.push({name:data,value:currentObj.val()})
})
console.log(formData)
},
update: function() {
var _li= $('li');
_li.each(function(idx) {
var currentObj=$(this);
console.log(currentObj.text());
$(this).attr("value", idx + 1);
})
}
});
which I've added to WordPress admin that seems to work, at least from a drag and drop perspective, however, once I update/save my post the values revert to their initial sort order.
Screenshot
Some expert help would be greatly appreciated, thank you

That's because you are changing the order on the current instance only.
If you want to hold the change, then try saving the value of your order (in sessionStorage/ localStorage/ cookie/ database) and on page load, always read the default order as the stored order.

Fullcalendar Scheduler Timeline View - Finding resource id of externally dragged event pre-drop

I'm looking to find how to get the resource id of where an external event is being dragged over (pre-drop). The highlighting appears (fc-highlight-container class), but i'm looking to find the resource id of this highlighted area so that i can do some comparisons against the other events that are already placed within that resource before the event is actually dropped.
Once i know the resource id i can do the rest. I just have no idea where to start.
I'm currently using v3.10. I'm unable to upgrade to v4 due to a bug.
Also just using latest jQuery

Alas, I seem to have found a solution.
For anyone else with a similar issue, the following use of the "eventAfterAllRender" hook seemed to have done the trick:
eventAfterAllRender: function (view) {
$(".fc-rows>table>tbody>tr").droppable({
tolerance: "pointer",
over: function (event, ui) {
var hoveredTR = $(this);
console.log(hoveredTR.attr("data-resource-id"));
}
});
}

Removing individual markers from map at the end of animation

I have a map with several moving markers on it and have been trying to remove each individual one when their respective animation ends. I am using Leaflet and Leaflet's plugin Leaflet.MovingMarker. I tried using methods isEnded() and end without much success.
With the latter method (end), the following code removes only but one marker (full code here):
marker.on('end', function() {
map.removeLayer(this);
});
With a click event instead of an end event, each marker is made easily removable, but then this is not what I am looking for:
marker.on('click', function() {
map.removeLayer(this);
});
With the method isEnded(), have not had any luck at all either (full code here):
var ended = marker.isEnded();
if (ended = true) {
console.log("this marker ended!");
map.removeLayer(this);
}
I wonder what I am missing here? Any hint appreciated!

jQuery draggable / sortable on dynamically-created elements

After some blood, sweat and luckily no tears I've managed to create a drag and drop system which fits my needs.
There are only 2 things that are almost triggering my tears...
Here's the jsfiddle
The problem is in these lines of code, but can't find it:
if (dropped === original) {
$("#dropzone").append('<li class="placeholder" data-id="" data-order="" data-content=""></li>');
init();
}
$(".remove").click(function() {
var removable = $(this).parent();
if (dropped > original) {
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
init();
});
So now the explanation and my goal:
There are 5 days and on default the placeholders will dynamicly increase with the number of days. If the max limit of placeholders is filled, another one will be appended. Now, after the not-default placeholder is appended and I delete a previous filled placeholder, I can't allow it to be droppable again.
Difficult to explain, but see the demo above ^
Extra: I would like to be able to drag items between those placeholders. But can't find a way either.
Thanks for the help!

You don't seem to reactivate the droppable on delete. And also, destroy them on drop might make you need to recreate them. You could use disable on drop and enable when deleting. Like this:
drop: function (event, ui) {
var dragging = ui.draggable.clone().find("img").remove();
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
And later:
if (dropped > original) {
$(this).parent().droppable('enable')
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
$(this).parent().droppable('enable');
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
http://jsfiddle.net/opmd46t2/3/

Developing drag drop swap javascript/jquery

I am implementing a drag and drop code, what I have at the moment is 6 dragable and dropable images, what this code does is when an image is dragged over another one they swap also all the images swap places as well (like a sort) what Im tryin to do is only swap positions of the 2 images, leaving the rest alone, any ideas plz??? the code (javascript and jquery) -
function itemInSpot(drag_item, spot) {
var oldSpotItem = $(spot).find('img');
if (oldSpotItem.length > 0) {
oldSpotItem.appendTo('#inventory').draggable({
revert: 'invalid'
});
}
var item = $('<img />');
item.attr('src', drag_item.attr('src')).attr('class', drag_item.attr('class')).appendTo(spot).draggable({
revert: 'invalid'
});
drag_item.remove(); // remove the old object
}
$(document).ready(function() {
$(".circles").draggable({
revert: 'invalid'
});
$('#inventory').droppable();
$("#circles").droppable({
accept: '.circles'
})
$('#circles,#inventory').bind('drop', function(ev, ui) {
itemInSpot(ui.draggable, this);
});
});

Without seeing your HTML markup I'm guessing that #circles is a drop zone that contains many images. That is making it harder to find out which image was dropped on. Instead, why not make each image a drop target instead of the entire #circles element? That way you know exactly which image was dropped onto and your swap function is working only with the images themselves and not with an entire element containing lots of images.