User1909155429 posted
I am attempting to add the following script to my repeater taken from: https://www.developer.com/lang/using-html5-drag-and-drop-in-asp.net.html
On implementation i get the following error messages:
// Error: Unable to get property 'style' of undefined or null reference
// javascript: WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("RepInbox$ctl01$LinkButton1", "", true, "", "", false, true))
The first relates to ondragstart event. and the other when i drop. The only difference from the original script is that i am using table tr element instead of Div?
<script type="text/javascript">
var srcElement;
$(document).ready(function () {
$("#Button3").click(function () {
$("div .bag div").remove();
});
$("#Button1").click(function () {
var data = new Array();
$("div .bag div").each(function (index) {
data[index] = "'" + this.innerHTML + "'";
});
$.ajax({
type: 'POST',
url: 'shoppingcart.aspx/PlaceOrder',
contentType: "application/json; charset=utf-8",
data: '{ products:[' + data.join() + ']}',
dataType: 'json',
success: function (results) { alert(results.d); },
error: function () { alert('error'); }
});
});
$("tr .3-card-4").each(function () {
this.addEventListener('dragstart', OnDragStart, false);
});
$("div .bag").each(function () {
this.addEventListener('dragenter', OnDragEnter, false);
this.addEventListener('dragleave', OnDragLeave, false);
this.addEventListener('dragover', OnDragOver, false);
this.addEventListener('drop', OnDrop, false);
this.addEventListener('dragend', OnDragEnd, false);
});
})
function OnDragStart(e) {
this.style.opacity = '0.4';
srcElement = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', $(this).find("header")[0].innerHTML);
}
function OnDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
$(this).addClass('highlight');
e.dataTransfer.dropEffect = 'move';
return false;
}
function OnDragEnter(e) {
$(this).addClass('highlight');
}
function OnDragLeave(e) {
$(this).removeClass('highlight');
}
function OnDrop(e) {
if (e.preventDefault) {
e.preventDefault();
}
srcElement.style.opacity = '1';
$(this).removeClass('highlight');
var count = $(this).find("tr[data-product-name='" + e.dataTransfer.getData('text') + "']").length;
if (count <= 0) {
$(this).append("<div class='selectedproduct' data-product-name='" + e.dataTransfer.getData('text') + "'>" + e.dataTransfer.getData('text') + "</div>");
}
else {
alert("This product is already added to your cart!");
}
return false;
}
function OnDragEnd(e) {
$("div .bag").removeClass('highlight');
this.style.opacity = '1';
}
</script>
<div align="center" >
<asp:Repeater ID="RepInbox" runat="server" onitemcommand="RepInbox_ItemCommand" OnItemDataBound="RepInbox_ItemDataBound" >
<HeaderTemplate >
<table id="Inbox" cellspacing="0" rules="all" border="0" class="w3-card-2" style="vertical-align:top" cellpadding="10" >
<tr >
<td width="15%" align="left" >
<strong>Remove</strong>
</td>
<td width="55%" align="left" >
<strong>Subject</strong>
</td>
<%-- <td width="15%" align="left">
<strong>Date</strong>
</td>--%>
<td width="15%" align="left" >
<strong>Type</strong>
</td>
<td width="15%" align="left">
<strong>Read Status</strong>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="w3-card-4" draggable="true" >
<td align="left" >
<asp:CheckBox ID="chkDeleted" Runat="server" Text="" ></asp:CheckBox>
</td>
<td align="left" >
<asp:LinkButton ID="LinkButton1" CommandArgument='<%#DataBinder.Eval(Container, "DataItem.MessageID")%>' runat="server"><%#DataBinder.Eval(Container,"DataItem.subject")%></asp:LinkButton>
<header><%#DataBinder.Eval(Container, "DataItem.MessageID")%> </header>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<div class="bag">
<asp:Image runat="server" ID="img1" ImageUrl="CSS/Images_Project/Cart.jpg" />
<br /><br />
<input id="Button1" type="button" value="Place Order" />
<br />
<input id="Button3" type="button" value="Clear Cart" />
</div>
</div>
