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'"--%>
--~--~---------~--~----~------------~-------~--~----~
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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
