在c#codebehind中添加jQuery可拖动对象
我已经能够使用jQuery创建一个站点来创建可拖放的对象。 我现在有一个新的请求,使用c#代码加载一些可拖动的对象 我可以添加对象,但它们不可拖动。使用浏览器的开发工具(F12),我能够检查手动添加的对象和通过c#脚本加载的对象。这些属性是相似的 但是,与脚本一起加载的脚本是不可拖动的。有人能解释一下我可能错过了什么吗 下面是我的代码在c#codebehind中添加jQuery可拖动对象,c#,jquery,asp.net,C#,Jquery,Asp.net,我已经能够使用jQuery创建一个站点来创建可拖放的对象。 我现在有一个新的请求,使用c#代码加载一些可拖动的对象 我可以添加对象,但它们不可拖动。使用浏览器的开发工具(F12),我能够检查手动添加的对象和通过c#脚本加载的对象。这些属性是相似的 但是,与脚本一起加载的脚本是不可拖动的。有人能解释一下我可能错过了什么吗 下面是我的代码 Panel pnlContainer = new Panel(); pnl
Panel pnlContainer = new Panel();
pnlContainer.ID = string.Format("pnlContainer_{0}_{1}", field.PageNumber, fieldIdx);
//Set the new ID for the field to the internal identifier
field.InternalFieldIdentifier = pnlContainer.ID;
pnlContainer.CssClass = "draggableItem ui-draggable dropped ui-resizable ui-draggable-handle";
pnlContainer.Attributes.Add("style", "top:" + calculated_top + "px; left: " + field.Left + "px");
pnlContainer.Attributes.Add("fieldname", string.Format("pnlContainer_{0}_{1}", field.PageNumber, fieldIdx));
pnlContainer.Attributes.Add("fieldtype", "textbox");
pnlContainer.Height = Unit.Pixel((int)field.Height);
pnlContainer.Width = Unit.Pixel((int)field.Width);
Label lblHandle = new Label();
lblHandle.CssClass = "draghandle";
lblHandle.Text = "::";
pnlContainer.Controls.Add(lblHandle);
Label lblContent = new Label();
lblContent.CssClass = "draggableItemContentText";
//lblContent.CssClass = "dropped";
lblContent.Text = "Text Box";
pnlContainer.Controls.Add(lblContent);
//=======================================
//Used for directional resizing purposes
//=======================================
Panel pnlResize_n = new Panel();
pnlResize_n.CssClass = "ui-resizable-handle ui-resizable-n";
pnlResize_n.Attributes.Add("style", "z-index: 90;");
//lblContent.Text = "Text Box";
pnlContainer.Controls.Add(pnlResize_n);
Panel lblResize_e = new Panel();
lblResize_e.CssClass = "ui-resizable-handle ui-resizable-e";
lblResize_e.Attributes.Add("style", "z-index: 90;");
//lblContent.Text = "Text Box";
pnlContainer.Controls.Add(lblResize_e);
Panel lblResize_w = new Panel();
lblResize_w.CssClass = "ui-resizable-handle ui-resizable-w";
lblResize_w.Attributes.Add("style", "z-index: 90;");
//lblContent.Text = "Text Box";
pnlContainer.Controls.Add(lblResize_w);
Panel lblResize_s = new Panel();
lblResize_s.CssClass = "ui-resizable-handle ui-resizable-s";
lblResize_s.Attributes.Add("style", "z-index: 90;");
//lblContent.Text = "Text Box";
pnlContainer.Controls.Add(lblResize_s);
pnlPdfPage.Controls.Add(pnlContainer);
下面是执行c#代码后对象的源代码视图
<div id="rlvPdf_ctrl0_pnlContainer_1_1" class="draggableItem ui-draggable dropped ui-resizable ui-draggable-handle" fieldname="pnlContainer_1_1" fieldtype="textbox" style="height:18px;width:197px;top:155px; left: 106px">
<span class="draghandle">::</span><span class="draggableItemContentText">Text Box</span>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;">
</div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;">
</div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;">
</div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;">
</div>
::文本框
手动添加对象
<div id="txtbx_0" class="draggableItem ui-draggable dropped ui-resizable ui-draggable-handle" page="1" fieldtype="textbox" fieldname="txtbx_0" style="top: 154px; left: 124px; width: 277px;">
<span class="draghandle">::</span>
<span class="draggableItemContentText">Text Box</span>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
</div>
::
文本框
在代码隐藏中添加对象后,此代码需要在客户端运行
$(function () {
//Make element draggable
$(".draggableItem").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function () {
return $(this).clone().appendTo('body').css({
'zIndex': 5
});
},
revert: "invalid",
cursor: 'move',
containment: '#pdfViewer'
});
$(".existingFieldItem").each(function () {
var droppedObject = $(this).parent()[0];
var field_type = $(this).attr("fieldtype");
applyDroppedAttributes($(this), droppedObject, field_type);
});
//Make element droppable
$(".droppablePage").droppable({
accept: '.draggableItem, .existingFieldItem'
});
});
你有工作的手动对象的来源吗?是的,请查看标记为“手动添加对象”的区域,我肯定没有看到任何明显的内容。它上面有什么东西(z索引)是不可拖动的吗?我不确定,我会调查的。我突然想到,即使我已经添加了对象,我仍然需要通过jQuery使它们可以拖动。这意味着当在后端添加对象时,在本例中是c#,然后我必须通过jQuery循环遍历每个对象,并向其添加draggable属性。你认为呢?我假设,因为这个函数正在工作,并且有相同的类,你正在将可拖动函数应用于这个类,所以是的,可能就是这样。