Ah, okay. That makes more sense: You actually create new elements that
simply aren't draggable yet. You have to initialize the draggable for
those elements:
$(this).append(ui.draggable).find("selectorToFindThatNewlyAppendedElement").draggable();
Jörn
On Thu, Aug 20, 2009 at 11:48 AM, Casper<[email protected]> wrote:
>
> As simple as I can get it I think.
>
> <!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 runat="server">
> <title>Manage the custom control</title>
> <link rel="Stylesheet" href="/MyPlan/themes/ui-lightness/
> ui.all.css" />
> <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></
> script>
> <script type="text/javascript" src="jquery-
> ui-1.7.2.custom.min.js"></script>
> <script type="text/javascript">
> /* <![CDATA[ */
> $(document).ready(function(){
> $(".ui-draggable").draggable({
> revert: "invalid"
> });
> $("#droppable").droppable({
> tolerance: "fit",
> drop: function(event, ui) {
> $(this).append(ui.draggable);
> }
> });
> $("#initialContainer").droppable({
> drop: function(event, ui){
> $(this).append(ui.draggable);
> }
> });
> });
> /* ]]> */
> </script>
> </head>
> <body>
> <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">
> <span>Projects dropdownlist</span>
> <select>
> <option>Customers</option>
> </select>
> </div>
> </div>
> </div>
> </form>
> </body>
> </html>
> I can drag elements to the #droppable div but not away from it.
>
> Thanks,
> Casper
>
> On Aug 20, 11:01 am, Jörn Zaefferer <[email protected]>
> wrote:
>> Still not getting anywhere. Can you simplify that until only code
>> directly related to the issue here is left?
>>
>> Jörn
>>
>> On Thu, Aug 20, 2009 at 8:50 AM, Casper<[email protected]> wrote:
>>
>> > Sorry, here it is without the asp.net code.
>> > <!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 runat="server">
>> > <title>Manage the custom control</title>
>> > <link rel="Stylesheet" href="/MyPlan/themes/ui-lightness/
>> > ui.all.css" />
>> > <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></
>> > script>
>> > <script type="text/javascript" src="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({
>> > tolerance: "fit",
>> > 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>
>>
>> > </head>
>> > <body>
>> > <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">
>> > <span>Projects dropdownlist</span>
>> > <select>
>> > <option>Customers</option>
>> > </select>
>> > </div>
>> > <div class="ui-draggable" id="customerDiv">
>> > <span>Customers dropdownlist</span>
>> > <select>
>> > <option>Customers</option>
>> > </select>
>> > </div>
>> > <div class="ui-draggable" id="actualsDiv">
>> > <span>External actuals</span>
>> > <input type="text" />
>> > </div>
>> > </div>
>> > </div>
>> > </form>
>> > </body>
>> > </html>
>>
>> > On Aug 19, 3:25 pm, Jörn Zaefferer <[email protected]>
>> > wrote:
>> >> Can you provide a (simplified) testpage? Having asp code doesn't help
>> >> much.
>>
>> >> Jörn
>>
>> >> On Wed, Aug 19, 2009 at 2:09 PM, Casper<[email protected]>
>> >> wrote:
> >
>
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
