With Richards help I've managed to create the dropzone so the controls
dropped there can be gathered afterwards as child elements.
I can't seem to figure out how to get them out of there again, e.g. in
case they were dropped by mistake.
I would like my original containing DIV to be able to act as droppable
for items which were moved by mistake.
I hope this makes sense to someone...
Anyway, this is my code (we're using controls from devExpress, hence
the dxe tagprefixes):
<script type="text/javascript" src="../jQuery/jquery-1.3.2-
vsdoc2.js"></script>
<script type="text/javascript" src="../jQuery/jquery-
ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$(".ui-draggable").draggable({
grid: [5,5],
cursorAt: { left: 5, top: 5 },
cursor: 'crosshair',
revert: "invalid",
opacity: 0.35
});
$("#droppable").resizable({
handles: 'se',
containment: $("#container")
});
$("#droppable").droppable({
drop: function(event, ui) {
// Also subtract the cursorAt property
var left = event.pageX - this.offsetLeft - 5;
var top = event.pageY - this.offsetTop - 5;
if ($(ui.draggable).parent().attr("id") ===
"initialContainer"){
$(this).append(ui.draggable);
ui.draggable.css("left", left);
ui.draggable.css("top", top);
}
}
});
$("#gathercontrols").click(function(e){
e.preventDefault();
var $children = $("#droppable").children();
var resultString = "";
$children.each(function(i){
// Do the stuff here...
if(this.id !== ''){
resultString += this.id + "\n Top:" + $(this).css
("top") + "\n left:" + $(this).css("left") + "\n position:" + $
(this).css("position") + "\n";
}
});
if (resultString !== ""){
alert(resultString);
}
});
$("#initialContainer").droppable({
drop: function(event, ui){
$(ui.draggable).appendTo($("#droppable"));
}
});
});
/* ]]> */
</script>
<form id="form1" runat="server">
<div id="container" style="float: right; width: 75%;">
<h3 class="ui-widget-header">Drop the controls over here.</
h3>
<input type="button" id="gathercontrols" Value="Get
control positions" />
<div id="droppable" class="ui-widget-content" style="min-
height:200px;">
</div>
</div>
<div id="dragableItems" style="float: left; width: 24%;">
<h3 class="ui-widget-header">These are the controls
available to the form.</h3>
<div style="border: 1px solid #ddd; min-height:200px;"
id="initialContainer">
<div class="ui-draggable" id="projectDiv">
<asp:Label Text="Projects dropdownlist"
runat="server"></asp:Label>
<dxe:ASPxComboBox ID="ASPxComboBox1"
runat="server">
<Items>
<dxe:ListEditItem Text="Projects" />
</Items>
</dxe:ASPxComboBox>
</div>
<div class="ui-draggable" id="customerDiv">
<asp:Label ID="Label1" Text="Customers
dropdownlist" runat="server"></asp:Label>
<dxe:ASPxComboBox ID="ASPxComboBox2"
runat="server">
<Items>
<dxe:ListEditItem Text="Customers" />
</Items>
</dxe:ASPxComboBox>
</div>
<div class="ui-draggable" id="actualsDiv">
<asp:Label ID="Label2" Text="External actuals"
runat="server"></asp:Label>
<dxe:ASPxTextBox ID="ASPxTextBox1" runat="server"
Width="170px">
</dxe:ASPxTextBox>
</div>
</div>
</div>
</form>
When I debug in Firebug the drop function for the $
("#initialContainer").droppable doesn't get called.
Any ideas why?
Thanks,
Casper
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
