[jQuery] Re: how to create multiple draggable div's with dynamic content

[roger]

Sounds like you need to create a function (or two) to manage the
creation of the draggable window and fill it with content. Your
function should either clone the markup from a hidden div on the page
or create new dom elements with javascript. You would then select the
container that you cloned or created, make it draggable and fill it
with content.

You could prepare some content from an ajax call and pass it into the
function below:

function makeDraggable(content) {
   $('body').append('<div id="superDrag">\
                               <a href="#" onclick="$(\'#superDrag
\').remove()">close</a>\
                               <div id="superDragContent">'+content+'</
div>\
                            </div>');
   $('#superDrag').draggable();
}

It would probably be more versatile to use it as a class:

function superDrag(content) {
   $('body').append('<div id="superDrag">\
                               <a id="superDragClose" href="#"
onclick="$(\'#superDrag\').remove()">close</a>\
                               <div id="superDragContent">'+content+'</
div>\
                            </div>');
   $('#superDrag').draggable();

   this.draggable = $('#superDrag').get(0);
   this.draggableContent = $('#superDragContent').get(0);
   var thisSuperDrag = this;
   $('#superDragClose').click(function() {
      thisSuperDrag.close();
   });
}

superDrag.prototype.close = function() {
   $(this.draggable).remove();
}

var newSuperDrag = new superDrag();

There are many ways you could make this thing work. I found an
interesting javascript templating plugin called jBind that makes it
easy to pull markup from the dom and fill in variables. It's a lot
nicer than concatenating strings, but a lot slower.


On Apr 14, 4:43 am, hybris77 <dist...@yahoo.com> wrote:
> hi, I'm trying to acchieve something for a few days now and I need som
> guidence
>
> I need to be able to open a draggabel div, that's no worry using the
> jQuery UI plugin
>
> what im not getting my head around is how to create multiple instances
> of this window
> with dynamic content but with a templade html structure that is filled
> with data
> from a database
>
> i've tried to use "clone()" to have the template "saved" and hidden on
> the page but
> when using this everything fails to work at all
>
> did anyone acchieve this?
>
> I may be a little fuzzy about what my problem is, there's too much
> code to be
> posted here, what I need is a little support in my undertaking
>
> /pär