如何在ITemplate类jquery-ui中动态创建<div>可拖动?

时间:2017-04-05 21:25:04

标签: jquery asp.net jquery-ui devexpress

我有一个页面,它使用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>

我该如何做到这一点?

谢谢

1 个答案:

答案 0 :(得分:1)

你做得对,只需将你的jquery放在文件就绪块中

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