How can I connect 2 list so that I can only drop the items from list 1 into list 2, including placeholders in list 2 but not in list 1.
I know there is connectWith but how could I prevent that the items can be reordered in list1
You can do this with a combination of the stop and receive events and by using the cancel() function:
$("#list1").sortable({
connectWith: ".sortables",
stop: function(e, ui) {
if ( $(ui.item).parent().is(this) ) {
$(this).sortable("cancel");
}
},
receive: function(e, ui) {
$(ui.sender).sortable("cancel");
}
});
$("#list2").sortable({connectWith: ".sortables"});
Explanation: stop is used to check if sorting an element originating within the same widget; receive is used to check if sorting an element originating in other widgets.
Here's an example fiddle: http://jsfiddle.net/hrvj2qnd/
Doc reference: http://api.jqueryui.com/sortable/
Final solution: http://jsbin.com/volote/1/edit?html,css,js,output
$("#sortable1, #sortable2").sortable({
connectWith: "#sortable2",
helper: 'clone',
placeholder: 'gap',
forcePlaceholderSize: true,
start: function(e, ui) {
ui.item.show();
},
stop: function(e, ui) {
if (ui.item.parent().is("#sortable1")) {
$(this).sortable("cancel");
}else{
console.log(ui.item.text())
console.log(ui.item.index())
}
},
receive: function(e, ui) {
if (ui.item.parent().is("#sortable2")) {
console.log(ui.item.text())
console.log(ui.item.index())
ui.item.clone().insertAfter(ui.item);
$(ui.sender).sortable("cancel");
}
}
})
$("#sortable2").sortable({
helper: 'original',
})
Related
I am trying to do something similar to this example I found here: http://jsfiddle.net/mekwall/sY7Vr/2/
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.addClass("drag")
.html("New item!")
);
}
});
In my case, I have an action bar that contains 'buttons' and a page. When I drag an action 'button' from the action bar (ie "Add text box") and do the drop, I want to insert a input rather than the button itself.
Is there a good way to do this?
Thanks for your time.
All you need to do is replace the content in the html method. The code below is inserting the html for an input of type text and is then removing the dragged item.
Updated Fiddle
$(".sortable").sortable({
items: ".drag",
connectWith: ".sortable",
start: function( event, ui ) {
$(ui.item).text("Drop me!");
},
stop: function(event, ui) {
$(ui.item).text("Drag me!");
},
receive: function( event, ui ) {
$(ui.item)
.addClass("ui-state-highlight")
.after(
$("<div>")
.html("<input type='text' class='new-input'/>") //Add an input
);
//Remove the dragged item. You can use "hide" here as well
$(ui.item).remove();
}
});
I'm using jQueryMobile's swipe event with JQuery UI's draggable.
JSFiddle explains it best.
$('.draggable').draggable({
delay: 300,
cancel: false,
start: function(event, ui) {
// something needs to happen here?
},
stop: function(event, ui) {
},
revert: function(is_valid_drop) {
return true;
}
});
$('.swipe-area').on('swiperight', function(evt) {
alert('swiped right :(');
});
Basically, when you try to drag the dark blue box to the right, the swipe event gets triggered.
I want to prevent this when dragging. What would you recommend?
(JSFiddle solution would be awesome!)
You Can use flags on or off
Demo
http://jsfiddle.net/pzwwphL3/
Code
var drag;
$('.droppable').droppable({
accept: '.draggable',
drop: function(event, ui) {
}
});
$('.draggable').draggable({
delay: 300,
cancel: false,
start: function(event, ui) {
drag = "on"
// event.preventDefault();
// event.stopPropagation();
},
stop: function(event, ui) {
drag = "off"
},
revert: function(is_valid_drop) {
return true;
}
});
$('.swipe-area').on('swiperight', function(evt) {
if (drag == "off") {
alert('swiped right :(');
}
});
I have 3 sortable divs. I try to change the height of an item if the user moves it to the right (without sorting). It works well in "sort" this is when the user is moving the item, but when the user leaves the item it comes back to its original height (40px) and I want it to keep the new one (20px). Is it possible to do that?
(Of course I could just put no condition in stop but this is a simplified case and I need a way to detect if in sort the user has moved the item)
$("#sortable").sortable({
sort: function (event, ui) { // during sorting
var move = (ui.position.left - ui.originalPosition.left);
$('#desti').text(move);
if ( move > 30 ) {
ui.item.css({height:'20px'});
}
},
stop: function(event, ui) {
if ( move > 30 ) {
ui.item.css({height:'20px'});
}
}
});
HTML:
<div id="sortable">
<div>item1</div>
<div>item1</div>
<div>item1</div>
</div>
CSS:
#sortable div {
height:40px;
margin-bottom:3px;
background:blue;
}
At first look at your code you are using move variable but it is declared inside sort: function
If you declare move inside sort:, how could you use it in stop:
$("#sortable").sortable({
sort: function (event, ui) { // during sorting
var move = (ui.position.left - ui.originalPosition.left);// Look At Here
$('#desti').text(move);
if ( move > 30 ) {
ui.item.css({height:'20px'});
}
},
stop: function(event, ui) {
if ( move > 30 ) {
ui.item.css({height:'20px'});
}
}
});
Just declare it like this...
var move =0;//Declare it here.. or create another move inside stop:
$("#sortable").sortable({
sort: function (event, ui) { // during sorting
move= (ui.position.left - ui.originalPosition.left);
$('#desti').text(move);
if (move > 30) {
ui.item.css({ height: '20px' });
}
},
stop: function (event, ui) {
//create a move here...
if (move > 30) {
ui.item.css({ height: '20px' });
}
}
});
I've positioned 2 containers such a way that container one overlays on another. But when I drop an item onto the container one, the dropped item goes into both containers. How do I restrict that?
//JS Code:
$("div.draggable").draggable({
helper: "clone",
cursor: "move",
containment: 'body'
});
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.html($draggable.clone());
}
});
Demo: http://jsfiddle.net/HL8VR/
Thanks #Nal but nothing works for me, So I Created this hack.
I store some data with an element once an item is dropped onto it. Unfortunately the data is stored with both Droppables which I could not isolate.
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.data({'drop': true, 'draggable': $draggable});
}
});
But once the item is dropped, I could figure out which droppable I'm hovering on.
$('div.droppable').hover(function() {
if ($(this).data('drop') === true) {
$(this).html($($(this).data('draggable')).clone());
// Clears the data from both droppables to avoid duplicating the item in them
$('div.droppable').data({'drop': false, 'draggable': false});
}
});
Demo: http://jsfiddle.net/codef0rmer/AVQVs/
This function takes an li element and adds it to another ul element. After this code is fired the jquery events attached to the children spans of the li element do not fire the first time they are clicked.
function AddToDropBox(obj) {
$(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut();
$(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast');
$(obj).children(".play").css("margin-right", "8px");
$(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" });
if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) {
$(".dropTitle").fadeOut("fast");
$(".sidebar-drop-box ul.admin-song-list").css("min-height", "0");
}
if (typeof SetLinks == 'function') {
SetLinks();
}
if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value===""||document.getElementById("ctl00_cphBody_hfRemoveMedia").value===null)
{
document.getElementById("ctl00_cphBody_hfRemoveMedia").value=(obj).attr("mediaid");
}
else
{
var localMediaIDs=document.getElementById("ctl00_cphBody_hfRemoveMedia").value;
localMediaIDs= localMediaIDs.replace((obj).attr("mediaid"),"");
document.getElementById("ctl00_cphBody_hfRemoveMedia").value=localMediaIDs+", "+(obj).attr("mediaid");
}
}
Is there something missing in this code that would cause that?
UPDATE
thats exactly what I am using for the jquery sortable feature that actually calls the addtoDropbox Method().
// Make our dropbox a selectable & sortable.
$(".sidebar-drop-box ul").sortable({
connectWith: '.admin-left',
tolerance: "intersect",
handle: ".handle",
opacity: "0.5",
receive: function(event, ui) {
**AddToDropBox(ui.item)**;
},
start: function(event, ui) {
$(".sidebar-drop-box ul.admin-song-list").css("min-height", "70px");
isDraggingSong = true;
//soundManager.stopAll();
//$(".btn-stop").removeClass("btn-stop");
},
stop: function(event, ui) {
if ($(".sidebar-drop-box ul").children("li").length == 0) {
$(".dropTitle").fadeIn();
}
}
}); //.selectable({ filter: 'li', cancel: '.btn-stop,.btn-play,.notes,.btn-del,span.remove' });
// Do the same for our playlist.
$(".admin-left").sortable({
opacity: '0.5',
tolerance: "intersect",
handle: ".handle",
appendTo: 'appentToHolder',
items: "li.admin-song",
update: function(event, ui) {
$(ui.item).css("opacity", "0.0").animate({ opacity: "1.0" }, "medium");
if ($.browser.msie && $.browser.version == "7.0") {
$(ui.item).css("margin-bottom", "-6px");
}
},
receive: function(event, ui) {
AddToLeftList(ui.item);
},
start: function(event, ui) {
$(".admin-left li.ui-selected").removeClass("ui-selected");
isDraggingSong = true;
//soundManager.stopAll();
//$(".btn-stop").removeClass("btn-stop");
},
stop: function(event, ui) {
CheckLeftList();
},
connectWith: '.sidebar-drop-box ul'
}).selectable({ filter: 'li.admin-song', cancel: '.head *,.btn-stop,.btn-play,.notes,.btn-del,span.remove' }); // added .head * to fix bug# 1013
the bold line calls the function I added previously, which places the li element.
I am not sure exactly where the disconnect happens, but i know between these 2 code segments that it breaks something and the next click doesn't not work on the source ul. i ahve been struggling with this for days. I cant turn this back to my boss this shape...lol
thanx
It doesn't look like this function is adding something to a list.
This function first does a couple of
CSS changes to obj and it's
descendants.
Then it goes and calls the global
function SetLinks (if it is
defined).
And thirdly it sets the value of
the element
"ctl00_cphBody_hfRemoveMedia", which
is probably some kind of input.
Looks like this was pasted together from at least two other functions and would need refactoring.
I'm guessing that the cause for your lost events might be somewhere near a call to AddToDropBox.