तक पहुंचने पर IE 6/7 "निर्दिष्ट त्रुटि" बग के लिए कोई कामकाज है, मैं अवधारणा अनुप्रयोग के एक साधारण एएसपी.NET प्रमाण में jQuery UI के ड्रैगगेबल और ड्रॉपपेबल लाइब्रेरी का उपयोग कर रहा हूं। यह पृष्ठ आंशिक पृष्ठ अपडेट करने के लिए ASP.NET AJAX UpdatePanel का उपयोग करता है। यह पृष्ठ किसी उपयोगकर्ता को एक आइटम को ट्रैशकेन div में छोड़ने की अनुमति देता है, जो डेटाबेस से रिकॉर्ड हटाए जाने वाले पोस्टबैक का आह्वान करेगा, फिर सूची (और अन्य नियंत्रण) को पुनर्निर्मित करता है, जिस पर आइटम दवा थी। इन सभी तत्वों (ड्रैग करने योग्य आइटम और ट्रैशकेन div) एक एएसपी.NET अपडेट पैनेल के अंदर हैं।ऑफसेट माता-पिता
function initDragging()
{
$(".person").draggable({helper:'clone'});
$("#trashcan").droppable({
accept: '.person',
tolerance: 'pointer',
hoverClass: 'trashcan-hover',
activeClass: 'trashcan-active',
drop: onTrashCanned
});
}
$(document).ready(function(){
initDragging();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function()
{
initDragging();
});
});
function onTrashCanned(e,ui)
{
var id = $('input[id$=hidID]', ui.draggable).val();
if (id != undefined)
{
$('#hidTrashcanID').val(id);
__doPostBack('btnTrashcan','');
}
}
पृष्ठ पोस्ट वापस, आंशिक रूप से UpdatePanel की सामग्री को अद्यतन करने, मैं draggables और droppables rebind जब:
यहाँ खींचने और छोड़ने आरंभीकरण स्क्रिप्ट है। जब मैं अपने कर्सर के साथ एक ड्रैगगेबल लेता हूं, तो मुझे एक "htmlfile: निर्दिष्ट त्रुटि" मिलती है। अपवाद। मैं इस समारोह है कि मैंने लिखा करने के लिए कॉल के साथ elem.offsetParent की जगह jQuery पुस्तकालय में इस समस्या को हल कर सकते हैं:
function IESafeOffsetParent(elem)
{
try
{
return elem.offsetParent;
}
catch(e)
{
return document.body;
}
}
मैं भी रूप में यह एक ही त्रुटि फेंकता elem.getBoundingClientRect() के लिए कॉल से बचने के लिए किया है। रुचि रखने वालों के लिए, मुझे केवल Dimensions Plugin में jQuery.fn.offset फ़ंक्शन में इन परिवर्तनों को करना पड़ा।
मेरे प्रश्न हैं:
- हालांकि यह काम करता है, वहाँ बेहतर तरीके हैं (क्लीनर, बेहतर प्रदर्शन, jQuery पुस्तकालय को संशोधित करने के बिना) इस समस्या को हल करने के लिए?
- यदि नहीं, तो भविष्य में jQuery लाइब्रेरी अपडेट करते समय मेरे परिवर्तनों को सिंक में रखने का प्रबंधन करने का सबसे अच्छा तरीका क्या है? उदाहरण के लिए, उदाहरण के लिए मैं jQuery वेबसाइट से डाउनलोड की गई फ़ाइलों में इनलाइन की तुलना में कहीं और लाइब्रेरी का विस्तार कर सकता हूं।
अद्यतन:
@some यह सार्वजनिक रूप से सुलभ नहीं है, लेकिन यदि ऐसा है तो मुझे इस जवाब में प्रासंगिक कोड पोस्ट करने देगा मैं देखेंगे। बस एक एएसपी.नेट वेब एप्लिकेशन बनाएं (इसे ड्रैग एंडड्रॉप नाम दें) और इन फ़ाइलों को बनाएं। Complex.aspx को अपने प्रारंभ पृष्ठ के रूप में सेट करना न भूलें। तुम भी jQuery UI drag and drop plug in डाउनलोड करने के लिए के रूप में अच्छी jQuery core
रूप Complex.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Complex.aspx.cs" Inherits="DragAndDrop.Complex" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initDragging()
{
$(".person").draggable({helper:'clone'});
$("#trashcan").droppable({
accept: '.person',
tolerance: 'pointer',
hoverClass: 'trashcan-hover',
activeClass: 'trashcan-active',
drop: onTrashCanned
});
}
$(document).ready(function(){
initDragging();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function()
{
initDragging();
});
});
function onTrashCanned(e,ui)
{
var id = $('input[id$=hidID]', ui.draggable).val();
if (id != undefined)
{
$('#hidTrashcanID').val(id);
__doPostBack('btnTrashcan','');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="updContent" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:LinkButton ID="btnTrashcan" Text="trashcan" runat="server" CommandName="trashcan"
onclick="btnTrashcan_Click" style="display:none;"></asp:LinkButton>
<input type="hidden" id="hidTrashcanID" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" />
<table>
<tr>
<td style="width: 300px;">
<asp:DataList ID="lstAllPeople" runat="server" DataSourceID="odsAllPeople"
DataKeyField="ID">
<ItemTemplate>
<div class="person">
<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' />
Name:
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />
<br />
<br />
</div>
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="odsAllPeople" runat="server" SelectMethod="SelectAllPeople"
TypeName="DragAndDrop.Complex+DataAccess"
onselecting="odsAllPeople_Selecting">
<SelectParameters>
<asp:Parameter Name="filter" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
</td>
<td style="width: 300px;vertical-align:top;">
<div id="trashcan">
drop here to delete
</div>
<asp:DataList ID="lstPeopleToDelete" runat="server"
DataSourceID="odsPeopleToDelete">
<ItemTemplate>
ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br />
Name:
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
<br />
<br />
</ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="odsPeopleToDelete" runat="server"
onselecting="odsPeopleToDelete_Selecting" SelectMethod="GetDeleteList"
TypeName="DragAndDrop.Complex+DataAccess">
<SelectParameters>
<asp:Parameter Name="list" Type="Object" />
</SelectParameters>
</asp:ObjectDataSource>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Complex.aspx.cs की आवश्यकता होगी
namespace DragAndDrop
{
public partial class Complex : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected List<int> DeleteList
{
get
{
if (ViewState["dl"] == null)
{
List<int> dl = new List<int>();
ViewState["dl"] = dl;
return dl;
}
else
{
return (List<int>)ViewState["dl"];
}
}
}
public class DataAccess
{
public IEnumerable<Person> SelectAllPeople(IEnumerable<int> filter)
{
return Database.SelectAll().Where(p => !filter.Contains(p.ID));
}
public IEnumerable<Person> GetDeleteList(IEnumerable<int> list)
{
return Database.SelectAll().Where(p => list.Contains(p.ID));
}
}
protected void odsAllPeople_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
e.InputParameters["filter"] = this.DeleteList;
}
protected void odsPeopleToDelete_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
e.InputParameters["list"] = this.DeleteList;
}
protected void Button1_Click(object sender, EventArgs e)
{
foreach (int id in DeleteList)
{
Database.DeletePerson(id);
}
DeleteList.Clear();
lstAllPeople.DataBind();
lstPeopleToDelete.DataBind();
}
protected void btnTrashcan_Click(object sender, EventArgs e)
{
int id = int.Parse(hidTrashcanID.Value);
DeleteList.Add(id);
lstAllPeople.DataBind();
lstPeopleToDelete.DataBind();
}
}
}
Database.cs
namespace DragAndDrop
{
public static class Database
{
private static Dictionary<int, Person> _people = new Dictionary<int,Person>();
static Database()
{
Person[] people = new Person[]
{
new Person("Chad")
, new Person("Carrie")
, new Person("Richard")
, new Person("Ron")
};
foreach (Person p in people)
{
_people.Add(p.ID, p);
}
}
public static IEnumerable<Person> SelectAll()
{
return _people.Values;
}
public static void DeletePerson(int id)
{
if (_people.ContainsKey(id))
{
_people.Remove(id);
}
}
public static Person CreatePerson(string name)
{
Person p = new Person(name);
_people.Add(p.ID, p);
return p;
}
}
public class Person
{
private static int _curID = 1;
public int ID { get; set; }
public string Name { get; set; }
public Person()
{
ID = _curID++;
}
public Person(string name)
: this()
{
Name = name;
}
}
}
आप न्यूनतम के साथ एक परीक्षण पृष्ठ पर एक लिंक प्रदान कर सकता है? – some