Forum: RForum Drag and drop Images

Hi all ,

I am doing image drag and drop functionality in asp.net, the drag
functionality is working fine but my drop functionality is not working
fine so i need help.
I am getting the error in prototype.js file in line number 1903 "var
value = element.style[style];" element is null. and i ma stuck on this
from last one week.....the whole code of my aspx file is here...

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="ImageUpload.aspx.cs"
Inherits="WebPages2.Advertiser.ImageUpload"
MasterPageFile="~/Advertiser/AdvertiserMaster.Master" %>


<asp:Content ID="AdvImgUploadHead" ContentPlaceHolderID="AdvHead"
runat="server">

    <script src="/Scripts/prototype.js" type="text/javascript"></script>
    <script src="/Scripts/scriptaculous.js?load=effects,dragdrop"
type="text/javascript"></script>


<script type="text/javascript" language="javascript">
    function triggerFileUpload(sender,args)
    {
        var objfile = document.getElementById('File1');
         objfile.click();
    }

//    function setHiddenValue1()
//    {
//       alert("hi");
//     document.getElementById("HiddenField2").value =
document.getElementById("adv_img_2").value;
//    }
    </script>

</asp:Content>

<asp:Content ID="AdvImgUploadMainPageContent"
ContentPlaceHolderID="AdvMainPageContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ReplaceButton" EventName="Click" />
</Triggers>

</asp:UpdatePanel>
    <h1>
        Image View
    </h1>
    <div id="frmcontrols" class="transaction-table-pane">
    <asp:Panel ID="Panel2" runat="server" >
        <table class="image-view-pane" >
            <tr>
                <td>
                <div id="Div1" style="Width:50;Height:60"
class="transaction-table-pane">
                   <asp:ImageButton ID="adv_img_100" CssClass="adv_imgs"
ImageUrl="../Resources/ImageUploadData/adv_aqua.png" Width="97"
Height="60" runat="server" />
                   </div>
                </td>
                <td>
                    <p>Default Ad</p>
                </td>
            </tr>
            <tr>
                <td>
                 <asp:Panel  ID="ImagePanel" runat="server"
CssClass="adv_imgs" >
                 </asp:Panel>

                </td>
            </tr>

            <tr>

            </tr>
        </table>
        </asp:Panel>
        <div id="delbuttondiv" style="display:none">
        <asp:Button ID="DeleteButton" runat="server" Text="Delete"
OnClick="DeleteButton_Click" CssClass="image_upload_buttons" />
        </div>
         <div id="uplbuttonDiv" style="display:none">
        <asp:Button ID="UploadButton" runat="server" Text="Upload"
OnClientClick="triggerFileUpload()" OnClick="UploadButton_Click"
CssClass="image_upload_buttons" />
        </div>
        <div id="repbuttonDiv" style="display:none">
        <asp:Button ID="ReplaceButton"  runat="server" Text="Replace"
OnClientClick="triggerFileUpload()" OnClick="ReplaceButton_Click"
CssClass="image_upload_buttons" />

      <input id="File1" type="file" onchange="setHiddenValue()"
style="visibility:hidden;" />
        </div>

    </div>
      <div>
           <asp:HiddenField ID="HiddenField1" runat="server" />
           <asp:HiddenField ID="HiddenField2" runat="server" />
           <asp:HiddenField ID="HiddenField3" runat="server" />
           <asp:HiddenField ID="HiddenField4" runat="server" />
      </div>
    <h1>
        Auction View
    </h1>
    <%--<asp:Panel ID="Panel3"  runat="server">--%>
    <asp:Panel ID="Panel3"  runat="server">
    <div style="height:auto" class="transaction-table-pane">
        <div  id="auction_images_cont_1" runat="server"
class="very-thin-border" style="width:65%">
            <h2>Auction_name_1</h2>
            <div id="auction_images_1" runat="server" >
            </div>
        </div>
        <%--<br />
        <div id="auction_images_cont_2" runat="server"
class="very-thin-border" style="width:65%">
            <h2>Auction_name_2</h2>
            <div id="auction_images_2" runat="server">
            </div>
        </div>
        <div id="rembuttonDiv" style="display:none" runat="server">
        <asp:Button ID="RemoveButton" runat="server" Visible="false"
Text="Remove" CssClass="image_upload_buttons"/>
        </div>--%>
    </div>
    </asp:Panel>
  <%--  </div>
    </asp:Panel>--%>

    <script type="text/javascript">
        /*
            This code should ideally be registered on the server side.
        */
//        function wedge(event){
//            Event.stop(event);
//            return false;
//            }

//        function onStartFunction(){
//          if (document.all){
//            Event.observe(document.body, "drag", wedge, false);
//            Event.observe(document.body, "selectstart", wedge, false);
//          }
//        }
//
//        function onEndFunction(){
//            if (document.all){
//                Event.stopObserving(document.body, "drag", wedge,
false);
//                Event.stopObserving(document.body, "selectstart",
wedge, false);
//            }
//        }
//        function wedge(event)
//        { return false
//        }
//
//      new Draggable("ImageButton1",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//        new Draggable("adv_img_3",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//        new Draggable("adv_img_4",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//      new Draggable("adv_img_5",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//      new Draggable("adv_img_6",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//           new Draggable("adv_img_7",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//           new Draggable("adv_img_8",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//           new Draggable("adv_img_9",
//          {
//              revert: true,
//            onStart: onStartFunction, onEnd: onEndFunction
//          });
//
//        function getImageId(image_id){
//            var tokens = image_id.split("_");
//            return tokens[tokens.length - 1];
//        }

//        function createImageElement(image_id, image_src, image_class){
//            var element = 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;
//        }

//        Droppables.add('auction_images_cont_1', {
//            accept: 'adv_imgs',
//            hoverclass: 'drag_drop_hover',
//            onDrop: function(element) {
//                var parent =
document.getElementById("auction_images_1");
//                parent.appendChild(createImageElement(element.id,
element.src, "adv_imgs"));
//                $('auction_images_cont_1').highlight();
//            }
//        });
//
//        Droppables.add('auction_images_cont_2', {
//            accept: 'adv_imgs',
//            hoverclass: 'drag_drop_hover',
//            onDrop: function(element) {
//                var parent =
document.getElementById("auction_images_2");
//                parent.appendChild(createImageElement(element.id,
element.src, "adv_imgs"));
//                $('auction_images_cont_2').highlight();
//            }
//        });
    </script>
    <script type="text/javascript">
        /*
            This code should ideally be registered on the server side.
        */
        function wedge(event){
            Event.stop(event);
            return false;
            }

        function onStartFunction(){
          if (document.all){
            Event.observe(document.body, "drag", wedge, false);
            Event.observe(document.body, "selectstart", wedge, false);
          }
        }

        function onEndFunction(){
            if (document.all){
                Event.stopObserving(document.body, "drag", wedge,
false);
                Event.stopObserving(document.body, "selectstart", wedge,
false);
            }
        }

      new Draggable(document.getElementById("<%=HiddenField4.Value%>"),
          {
              revert: true,
            onStart: onStartFunction, onEnd: onEndFunction
          });

        function wedge(event){
            Event.stop(event);
            return false;
            }

        function getImageId(image_id){
            var tokens = image_id.split("_");
            return tokens[tokens.length - 1];
        }

        function createImageElement(image_id, image_src, image_class){
            var element =
document.createElement(document.getElementById("<%=
HiddenField3.Value%>"));
           // var element = 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;
        }

        Droppables.add('auction_images_cont_1', {
            accept: 'adv_imgs',
            hoverclass: 'drag_drop_hover',
            onDrop: function(element) {
                var parent =
document.getElementById("auction_images_1");
                parent.appendChild(createImageElement(element.id,
element.src, "adv_imgs"));
                $('auction_images_cont_1').highlight();
            }
        });
//
        Droppables.add('auction_images_cont_2', {
            accept: 'adv_imgs',
            hoverclass: 'drag_drop_hover',
            onDrop: function(element) {
                var parent =
document.getElementById("auction_images_2");
                parent.appendChild(createImageElement(element.id,
element.src, "adv_imgs"));
                $('auction_images_cont_2').highlight();
            }
        });
    </script>
</asp:Content>


<%-- onmouseover="this.className='imageOn'"
onmouseout="this.className='imageOff'"--%>





http://groups.google.com/group/prototype-scriptacu...


thanks
sandeep