0

i have used the jquery layout and in that lay out i used the drag and drop. but i cant get why the droppable elements did not drag in the dropped area. i used this for drag but cant get success

jQuery(function() {
  jQuery(".component").draggable({
      //use a helper-clone that is append to 'body' so is not 'contained' 
      //by a pane
    helper:  function () { 
                            return jQuery(this).clone().appendTo('body')
                               .css({'zIndex':5,}).show(); 
    },
    cursor: 'move'
  });

  jQuery('.ui-layout-center').droppable({ 
     accept:  '.component',
     drop:  function (event, ui) {
                      jQuery(this).append(jQuery(ui.draggable).clone()); 
     }
  }); 
});

my html page is like that..

<div class="ui-layout-south">
  <button onclick="myLayout.toggle('north')">Toggle North Pane</button>
</div>

<div class="ui-layout-east"><span>Components</span>
  <div class="component" style="width: 30px; border: 2px solid #CCC; 
                   background: #009; padding: 10px;"></div>
  <p><button onclick="myLayout.close('east')">Close Me</button></p>
</div>

<div class="ui-layout-center">
</div>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Jackson
  • 58
  • 2
  • 10

1 Answers1

0

Is that what you are looking for?

http://jsfiddle.net/WpRTc/2/ .

I am not sure which jquery version you are using. So I have used live method here. If you are using latest version of jquery then try "on" instead of live.

Pavan
  • 4,209
  • 1
  • 22
  • 25
  • sorry, but i am trying another thing. i mean this code is working, but i can see when you drag an element, the dragged element automatically placed like one under another, which dont want. i want that user can drag the element and paced that element any position in the page. – Jackson Jan 09 '12 at 06:21
  • ohh...ok..then you have to find position after your div is dropped. See this post for implementation http://stackoverflow.com/questions/849030/how-do-i-get-the-coordinate-position-after-using-jquery-drag-and-drop – Pavan Jan 09 '12 at 06:27
  • No, i have to placed the elements in the page any where as the user requirement.like you know in any wireframe application. – Jackson Jan 09 '12 at 06:33
  • ok...May be this should help. http://www.placona.co.uk/166/javascript/a-more-elaborated-jquery-drag-drop-cloning/ – Pavan Jan 09 '12 at 06:47