i’m using jquery(new in jquery) to drag li item into canvas , and its work fine , but when i try to drag the item back to list , it does not work , can you help me please ? here is the source http://jsfiddle.net/BAZyF
thanks
i’m using jquery(new in jquery) to drag li item into canvas , and its work fine , but when i try to drag the item back to list , it does not work , can you help me please ? here is the source http://jsfiddle.net/BAZyF
thanks
I have been trying to find some spare time to investigate this same issue from your other thread at http://www.sitepoint.com/forums/showthread.php?1057196-grad-drop-scrollable-div-to-canvas
Others are welcome to jump in too.
Here’s a very rough proof of concept: http://jsfiddle.net/BAZyF/5/
It’s still not perfect but could become workable with a bit more effort.
I don’t think jQuery UI is really built to handle this sort of interaction out of the box. Then again, perhaps someone with a bit more experience with jQuery UI will come along and show us how elegantly this can be solved.
With respect to my changes: When the clone gets dragged back into the list, it loses its identity but retains a style attribute and content (wut?). So, I was able to kludge it somewhat by making the list itself a droppable item and setting up a second draggable event handler on the clone that makes it forcibly reassemble itself into an identifiable element and remove the positioning attribute.
Also, as mentioned on stack overflow: The canvas itself doesn’t actually serve any purpose during this whole exercise, it just serves as a bounds for the drop event and stays empty the whole time.
hi dears , thank to u all , i fixed this issue , its not perfect but its working fine , i will post the code later , but simply , i clone the item and when i drop it into the list , i remove the item in the canvas then i append it to list , then i make sorting to the list , its work aroung , but working fine …thank u all , i love this forum and the people in this forum , really so nice people
regards
Nice going! Don’t forget to post that code, I’d love to see how you sorted it out.
$("#group1").droppable({
drop: function( event, ui ) {
item = ui.draggable ;
ui.draggable.remove() ;
$("#group1").append('<li id="'+item.attr('id')+'" >'+item.attr('id')+'</i>');
$('li[id^="item"]').not(".ui-draggable").draggable({
// connectToSortable: "#group1",
helper: function(){
$copy = $(this).clone();
return $copy;
},
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
dropped=false
$(this).removeClass("hide");
}
$('#'+$(this).attr('id')).draggable({
//connectToSortable: "#group1",
//helper: "clone",
revert: "invalid"
});
}
});
$("#group1 li").sort(asc_sort).appendTo('#group1');
}
});
function asc_sort(a, b){
if(parseInt(($(b).text())) < (parseInt(($(a).text())))){
return $(b).text();
}
}
$('li[id^="item"]').draggable({
//revert: "invalid",
// connectToSortable: "#group1",
helper: function(){
$copy = $(this).clone();
return $copy;
},
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
dropped=false
$(this).removeClass("hide");
}
$('#'+$(this).attr('id')).draggable({
//connectToSortable: "#group1",
//helper: "clone",
revert: "invalid"
});
}
});
var dropped = false;
$( "#canvas" ).droppable({
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
//ui.helper.appendTo(this);
}
});
if u can improve the code , i will be happy …thanks again