Menu
I have a scrollable list on the left of the page (overflow:auto) and several droppables on the right of the page. I found a workaround to allow an element to be dragged from the list to a container using a clone here but when the element is dropped, it gets position:absolute and a top and right position added to an inline style along with the z-index which was originally there. All other classes attached are in the copy, just that after the drag and drop, that element cannot be dragged again ?
Is there a way to do this or to remove the inline style added by the cloning process ?
Simplified code showing the issue is shown below - you should be able to just cut and paste to a page and drop in your webroot to test it. Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<script>
$(document).ready(function() {
var dropped = false;
$(".container").droppable({
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
$(".item").draggable({
revert: 'invalid',
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 {
$(this).removeClass("hide");
}
}
});
});
</script>
<style>
.scrollable {
margin-top:5px;
float:left;
height:140px;
width:60px;
overflow:auto;
}
.container {
height: 140px;
width: 160px;
float:left;
border:3px solid black;
margin:5px;
}
.item {
float:left;
height:40px;
width:40px;
}
.red {background-color: red; }
.black {background-color: black;color: white;}
.green {background-color: green;}
.blue {background-color: blue; color: white;}
.yellow {background-color: yellow;}
</style>
</head>
<body>
<div id="list" class="scrollable">
<div id="p1" class="item red">A</div>
<div id="p2" class="item black">B</div>
<div id="p3" class="item green">C</div>
<div id="p4" class="item blue">D</div>
<div id="p5" class="item yellow">E</div>
</div>
<div>
<div id="c1" class="container"></div>
<div id="c2" class="container"></div>
<div id="c3" class="container"></div>
</div>
</body>
850
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Add the draggable property with the value of true to an element to make it draggable. The dragstart , drag , and dragend events fire on the draggable element. The dragenter , dragover , dragleave or drop events fire on the drop target.
In your draggable stop method, I took the cloned element and made it draggable.
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide");
}
$('#'+$(this).attr('id')).draggable({revert: 'invalid'});
}
When the dragging element is cloned, it preserves the "ui-draggable" class, but that's not enough to make it draggable. It must be rebound.
http://jsfiddle.net/CMYzw/
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
