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.
Related
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.
I came across this modification for slick slider for advancing when clicking on the current image (see below). When I implement it on my page with multiple galleries it advances all galleries when I click on one, not only the one selected. Is there a possibility to use e.g. "this" selector in here?
http://codepen.io/ethanclevenger91/pen/MYNGrN
window.onload=function(){
$slideshow = $('.slider').slick({
dots:false,
autoplay:false,
arrows:false,
adaptiveHeight: true,
slidesToShow:1,
slidesToScroll:1
});
$(".slide").click(function() {
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
};
Please see the following codepen: http://codepen.io/anon/pen/ZOGmWo?editors=1010
The main idea is to define each slider separately.
First, define an object to hold all the sliders:
var sliders = {};
Then, looping through all the sliders, extracting the ID and saving a reference to the newly defined slider in our map, indexed by the ID:
$('.slider').each(function (index, slider) {
var id = slider.getAttribute('id');
console.log(id);
sliders[id] = $(slider).slick({ ... })
});
Now, on the click handler, we determine to which slider do the clicked slide belong to, using $(this).closest('.slider') and using progressing it.
$('.slide').click(function() {
var id = $(this).closest('.slider').get(0).getAttribute('id');
var $slideshow = sliders[id];
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
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/
I want to simply add new nodes by clicking a button (I have the code from jsPlumb source endpoint does not move when source container is dragged, I've tried the suggested answer but still not working for me).
Unfortunately, when I drag the new node, the endpoint (that should stick with the overlay) has not updated its position.
the endpoint will update its position after I mouseover the endpoint.
here is the fiddle
`$('#addNode').click(function (e) {
var newAgent = $('').attr('id', 'flowchartWindow' + num).addClass("window singleFirst");
newAgent.text('New Node ' + num);
$('#flowchart-demo').append(newAgent);
_addEndpoints(newAgent, [], ["TopCenter"]);
newAgent.draggable({
containment: 'parent',
drag: function (e) { $(this).find('._jsPlumb_endpoint_anchor_').each(function (i, e) {
jsPlumb.repaint($(e).parent());
});
}
});
num++;
});`
http://jsfiddle.net/3ao1odjp/2
(pardon my messy code. I'm trying to combine sample demo (flowchart) from the official jsplumb page and the code I have from stackoverflow above)
You should replace
newAgent.draggable(...
with
instance.draggable(newAgent, ...
Updated jsFiddle project is here
I want to sort my tabs and I also want to sort the fields inside the tabs. I want to be able to drag the fields from one tab to the other as well.
When the user clicks on the Save button I want to get a json string. Something similar to the following:
I did some research and it seems that it is possible using jQuery Sortable (Connect lists with Tabs). Can someone post a decent piece of html+javascript please? Thank you.
The following code I wrote is a disaster.
$(function () {
$("#tabs").tabs().find(".ui-tabs-nav").sortable({
axis: "x",
update: function(event, ui) {
debugger;
}
});
$(".fieldSortableList").sortable().disableSelection();
var $tabs = $("#tabs").tabs();
var $tab_items = $("ul:first li", $tabs).droppable({
accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (event, ui) {
var $item = $(this);
var $list = $($item.find("a").attr("href")).find(".connectedSortable");
ui.draggable.hide("slow", function () {
$(this).appendTo($list).show("slow");
});
}
});
});
Use the "ConnectWith" property when defining the sortable bind. This will allow you to sort/drop items form list a to list b.
In order to save their states, you can take the items of the list, save them as array in localStorage, and then compare them to the saved localstorage fields during page load. When you load the page, you compare the current list order, to the saved order, and if different, append them to the new list. When you are done, the new list has all of the items, but in the saved order.
I have not seen API for sortable in a while, but this will also help you out. http://johnny.github.io/jquery-sortable/