如何使在 ITemplate 类 jquery-ui 中动态创建的 <div> 可拖动？答案

【问题标题】：How do I make a <div> dynamically created in an ITemplate class jquery-ui draggable?如何使在 ITemplate 类 jquery-ui 中动态创建的 <div> 可拖动？
【发布时间】：2017-08-31 16:48:18
【问题描述】：

我有一个使用 DevExpress NavBar 控件和 ITemplate 实现类的页面，该类创建了一个服务器端运行的 div：

Public Class NavBarSelectCriteriaGroupItemTemplate
Implements ITemplate
    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
        Dim templateContainer As NavBarItemTemplateContainer = CType(container, NavBarItemTemplateContainer)

        Dim div As New HtmlGenericControl("div")
        div.ID = String.Format("div_{0}", DataBinder.Eval(templateContainer.DataItem, "text"))
        div.Style.Add("width", "100%")
        div.Style.Add("padding", "5px")
        div.Style.Add("border", "1px solid green")
        div.Style.Add("background-color", "red")
        div.Style.Add("display", "block")
        div.InnerText = String.Format(DataBinder.Eval(templateContainer.DataItem, "text"))
        div.Attributes.Add("runat", "server")
        'div.Attributes.Add("onclick", "alert('wtf!')")
        div.Attributes.Add("class", "dragme")

        container.Controls.Add(div)
    End Sub
End Class

一切正常，但现在我想将 JQuery-UI 可拖动功能添加到以这种方式实例化的每个 div。最初我尝试添加一个名为 dragme 的类属性，并在调用 ITemplate 的页面上添加对它的 css 引用，但没有明显的结果：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<style type="text/css">
    .dragme {}        
</style>

<script type="text/javascript">
    $('.dragme').draggable();
</script>

我怎样才能做到这一点？

谢谢

【问题讨论】：

标签： jquery asp.net jquery-ui devexpress

【解决方案1】：

你说得对，只需将你的 jquery 放在一个文档就绪块中

<script type="text/javascript">
   $(document).ready(function(){
    $('.dragme').draggable();
   });
</script>

【讨论】：