Hello,
I realise this is a ruby group, but I've got this link from
scriptaculous so I hope somebody can help. Apologies in advance if
this is the wrong place to post this type of question.
What I'm doing is reasonably simple in principle, but I'm not quite
sure how best to approach it.
I have a html page containing some JavaScript that reads nodes from an
xml file and for each 'clipping node in the xml the javascript adds a
div to my page (it contains some text or an image etc), I want each of
these divs to be draggable. So that they can be dragged into the text
area on my page which is droppable.
Now it works fine in my simple test page where I know at design time
what elements will need to be draggable. I just create a variable and
stick it in the onload i.e.
mydrag_1 = new Draggable('clipping_1',{revert:true,ghosting:true});
But as I don't know how many clippings there will be at design time I
can't get it to work and I'm not sure how to approach it.
A couple of things worth mentioning is that the draggable divs are not
present for the onload, they appear when a user selects a category
from a drop down list, JavaScript then loads the corresponding xml
file and adds a div for each clipping to the html page.
What I would like is a way of looping through and making all the
clipping divs (they each have a unique id) draggable. I will know the
ids of all the divs I need to make draggable. I would also like to be
able to toggle the dragging on and off (as I have done in my test),
this would be useful if a user for example wishes to highlight only a
section of the div and not drag the whole div.
Below is my working test page with hard coded draggable elements to
hopefully give a better understanding of what I want to achive. What
I would like to be able to do it enable and disable the draggable divs
as I need to:
Javascript
var mydrag_1;
var draggingEnabled;
window.onload=function(){
mydrag_1 = new
Draggable('clipping_1',{revert:true,ghosting:true});
mydrag_2 = new
Draggable('clipping_2',{revert:true,ghosting:true});
mydrag_3 = new
Draggable('clipping_3',{revert:true,ghosting:true});
Droppables.add('docText', {
accept: 'clipping',
onDrop: function(element)
{
var obj = document.getElementById("docText");
obj.value += element.innerHTML;
}
});
draggingEnabled = true;
}
function switchDragging(element)
{
if (draggingEnabled == true)
{
disableDragging();
element.innerHTML = 'Enable Block Dragging';
draggingEnabled = false;
}
else
{
enableDragging();
element.innerHTML = 'Disable Block Dragging';
draggingEnabled = true;
}
}
function enableDragging()
{
mydrag_1 = new
Draggable('clipping_1',{revert:true,ghosting:true});
mydrag_2 = new
Draggable('clipping_2',{revert:true,ghosting:true});
mydrag_3 = new
Draggable('clipping_3',{revert:true,ghosting:true});
}
function disableDragging()
{
mydrag_1.destroy();
mydrag_2.destroy();
mydrag_3.destroy();
}
HTML
<div id="dragDiv"><a href="javascript: switchDragging(this)"
onclick="switchDragging(this); return false;">Disable Block Dragging</
a></div>
<textarea cols="55" rows="30" id="docText"></textarea>
<div id="clipping_1" class="clipping"><b>one</b> Proin molestie quam.
Sed non felis eu mi auctor semper.</div>
<div id="clipping_2" class="clipping"><b>two</b> Consectetuer
adipiscing elit.</div>
<div id="clipping_3" class="clipping"><b>three</b> Lorem ipsum dolor
sit amet</div>
If anyone is able to offer any advice I'd be very grateful.
Thanks in advance
Mark
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to rubyonrails-spinoffs@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
