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.
Related
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'm trying to reuse "sortable" function in conjunction with "droppable". But when dragging from sortable drop event doesn't happen on each drop. Here is code example:
$(".sortable tbody").sortable({
start: function(ev, ui) {
console.log("start");
var id = ui.item.children()[0].textContent;
$(ui.item).data("id", id);
},
opacity: 0.5
});
$(".droppable").droppable({
drop: function(ev, ui) {
console.log("drop");
this.value = $(ui.draggable).data("id");
}
})
JSFiddle http://jsfiddle.net/27bom9sb/
What's wrong here and is there a better way to compound them?
UPDATE
After some additional testing it was found that dropping stability depends on draggable row lenth:
Here is example with short rows (stable): http://jsfiddle.net/usv496dm/1/
The same example but with longer row text (not stable): http://jsfiddle.net/usv496dm/2/
I have no idea why the stability depends on row length but now I think that this is wrong way to utilize sortable+droppable.
Use this script
Use tolerance property for the droppable.
Set tolerance property to "touch" or "pointer".
<script>
$(function () {
$(".sortable tbody").sortable({
start: function (ev, ui) {
var id = ui.item.children()[0].textContent;
$(ui.item).data("id", id);
}
});
$(".droppable").droppable({
tolerance: "touch",
drop: function (ev, ui) {
console.log("drop");
this.value = $(ui.draggable).data("id");
}
})
});
</script>
Worked for me.
Hope this helps
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',
})
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/