Thanks a lot for the response.
I am trying to give a detailed explanation of the problem below.
Please bear with the size of this post.
REQUIREMENT
============
Images in the 'ImageView' Panel should be dragged and dropped into
'AuctionView' Panel.Images in the 'ImageView' are fetched from the
DB.
ASPX PAGE
==========
a) Under IMAGE VIEW We have a panel on the client side which would
contain the draggable images.
These draggable images would be populated into the image View panel on
run time.
<asp:Panel ID="ImageViewPanel" runat="server" CssClass="adv_imgs" >
<!-- images will be populated here on runtime and are fetched from DB--
>
</asp:Panel>
b) Under AUCTION VIEW,we have a panel and 3 DIV's on the client side.
These would accept the dragged images from the Image View Panel into
the Auction View panel.
The placement of images into the auction View panel would happen on
run time.
<asp:Panel ID="AuctionViewPanel" runat="server">
<div style="height:auto" class="transaction-table-pane">
<div id="auction_images_contianer" runat="server"
class="very-thin-border" style="width:65%">
<h2>Auction_name_1</h2>
<div id="auction_images" runat="server" >
<!-- Images will be dropped here -->
</div>
</div>
</div>
</asp:Panel>
CODE BEHIND
=============
a) In cs file, on page_load, I am registering both prototype.js and
scriptaculous.js files.
LiteralControl headerjs1 = new LiteralControl();
headerjs1.Text = "<script type='text/javascript'src='/
Scripts/prototype.js'></script>";
Page.Header.Controls.Add(headerjs1);
LiteralControl headerjs2 = new LiteralControl();
headerjs2.Text = "<script type='text/javascript'src='/
Scripts/scriptaculous.js?load=effects,dragdrop'></script>";
Page.Header.Controls.Add(headerjs2);
b) I am also registering all the other functions required for
scriptaculous drag&Drop on page_load.
i) Page.ClientScript.RegisterStartupScript(this.GetType(),
"onStartFunction", @"function onStartFunction(){
if (document.all){
Event.observe(document.body, 'drag', wedge, false);
Event.observe(document.body, 'selectstart', wedge,
false);
}
}", true);
ii) Page.ClientScript.RegisterStartupScript(this.GetType(),
"onEndFunction", @"function onEndFunction(){
if (document.all){
Event.stopObserving(document.body, 'drag', wedge,
false);
Event.stopObserving(document.body, 'selectstart', wedge,
false);
}
}", true);
iii) this.Page.ClientScript.RegisterStartupScript(this.GetType(),
"drag" +
ImageclientId, @"new Draggable
(document.getElementById(" + "\"" + ImageclientId
+ @"""),{revert: true, onStart:
onStartFunction, onEnd: onEndFunction});", true);
['ImageclientId' is the CLIENTID of the image that would be
populated into the Image view panel]
iv) Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"wedge", @"<script language='javascript' type='text/
javascript'>function wedge(event){
Event.stop(event);
return false;
}</script>");
v) Page.ClientScript.RegisterStartupScript(this.GetType(),
"getImageId", @"function getImageId(image_id){
var tokens = image_id.split('_');
return tokens[tokens.length - 1];}", true);
vi) Page.ClientScript.RegisterStartupScript(this.GetType(),
"createImageElement", @"function createImageElement(image_id,
image_src, image_class){
var element = page.document.createElement('img');
element.setAttribute('id', 'auction_data_' +
image_id);
element.setAttribute('class', image_class);
element.setAttribute('src', encodeURI(image_src));
element.style.margin = '3px';
return element;
}", true);
vii) Page.ClientScript.RegisterStartupScript(this.GetType(),
"Droppables", @"Droppables.add(document.getElementById(" + "\"" +
auction_images_contianer.ClientID
+ @"""), {" +
"accept:'adv_imgs'," +
"hoverclass:'drag_drop_hover',"
+
"onDrop:function(element) {" +
"var parent = document.getElementById(" + "\"" +
auction_images.ClientID + @""");" +
"parent.appendChild(createImageElement
(element.id, element.src, 'adv_imgs'));" +
"$document.getElementById(" + "\"" +
auction_images_contianer.ClientID + @""").highlight();" +
" }});", true);
['adv_imgs' & drag_drop_hover are CSS classes]
PROBLEM
========
I am able to drag the images from the Panel-1 to the Panel-2 below;but
unfortunately unable to drop the image into the Panel-2. There are no
errors shown too. Complete functionality works well if I place the
controls on the client side, but doesnt work once the controls are
generated in the code behind.
Any help would be very much appreciated.
Thanks once again,
Cheers
Menon
On Apr 28, 4:52 pm, ColinFine <[email protected]> wrote:
> On Apr 28, 8:41 am, Menon <[email protected]> wrote:> Hi,
>
> > I am trying to implement Scriptacolus Drag&Drop for my asp.net/c#
> > application. I am trying to put drag and drop for some of the
> > components (divs - containing images fetched from the DB) those are
> > created run time on the server side. If I place the controls on the
> > client side and put the Scriptacolus Drag&Drop code there, everything
> > works fine. To make it working on the server side, I registered the
> > scripts and got the draggables working. But no luck with droppables!
> > Am I missing something here with drappables?
>
> > Any help would be much appreciated.
>
> It's very unclear to me what you mean by 'on the server side', since
> drag and drop necessarily runs on the browser, and therefore on the
> client side.
>
> Do you mean that you are downloading the Droppable code as part of you
> HTML page, but it's not working? In that case I suggest that it is
> being run before the elements which are to be made droppable have been
> created in the DOM. Check out the idiom
>
> document.observe('dom:loaded'. function () { ...
> see [1]
>
> Or do you mean that you want somethign to happen server-side when the
> user drops something? Then you need to read up on Ajax.
>
> Or do you mean something else I haven't understood?
>
> Colin Fine
>
> [1]http://www.prototypejs.org/api/document/observe
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
