Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在c#codebehind中添加jQuery可拖动对象_C#_Jquery_Asp.net - Fatal编程技术网

在c#codebehind中添加jQuery可拖动对象

在c#codebehind中添加jQuery可拖动对象,c#,jquery,asp.net,C#,Jquery,Asp.net,我已经能够使用jQuery创建一个站点来创建可拖放的对象。 我现在有一个新的请求,使用c#代码加载一些可拖动的对象 我可以添加对象,但它们不可拖动。使用浏览器的开发工具(F12),我能够检查手动添加的对象和通过c#脚本加载的对象。这些属性是相似的 但是,与脚本一起加载的脚本是不可拖动的。有人能解释一下我可能错过了什么吗 下面是我的代码 Panel pnlContainer = new Panel(); pnl

我已经能够使用jQuery创建一个站点来创建可拖放的对象。 我现在有一个新的请求,使用c#代码加载一些可拖动的对象

我可以添加对象,但它们不可拖动。使用浏览器的开发工具(F12),我能够检查手动添加的对象和通过c#脚本加载的对象。这些属性是相似的

但是,与脚本一起加载的脚本是不可拖动的。有人能解释一下我可能错过了什么吗

下面是我的代码

                        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属性。你认为呢?我假设,因为这个函数正在工作,并且有相同的类,你正在将可拖动函数应用于这个类,所以是的,可能就是这样。