首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > .NET > C# >

大神啊Jquery实现拖动

2012-12-15 
大神求助啊,Jquery实现拖动本人菜鸟一枚。,,使用Jquery实现了可拖动的DIV后(官网找的例子),拖动第一次完后

大神求助啊,Jquery实现拖动
本人菜鸟一枚。,,使用Jquery实现了可拖动的DIV后(官网找的例子),拖动第一次完后成功保存,继续拖动,为什么这次传过来位置变动值(不知道有没有传值过来,反正方法是执行了,数据库也变了),就是第二次带入的值还是第一次的值,搞半天高不好,拖一次刷新一次还可以,没出错。但我不想刷新,想时事保存,跪求懂得大神指点一二,感谢阿
[最优解释]

引用:
我是这样的该加入呢个标签里呢。具体怎么搞啊

简单看了下LZ的代码,没弄明白这个场景下实现拖动功能意义
如果LZ是需要实现上下li拖动的话 
dragEnd事件里面可以 each遍历循环出每个li拖动之后位置Index (这样需要LZ在数据表中添加一个index的字段,以后显示查询的时候根据index的大小排序)

将对应胡li和index的数据发送到你胡服务器处理页面,保存更新进数据库即可
简单的代码示例

<ul id="list1">
<li liid="6"></li>
<li liid="2"></li>
<li liid="3"></li>
<li liid="4"></li>
<li liid="1"></li>
<li liid="8"></li>
<li liid="7"></li>
</ul>
 <script type="text/javascript">                       
$("#list1").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });               function saveOrder() {     
 var data;
$("#list1 li").each(function(i){
    data.push("{'liid':$(this).attr('liid'),'index':i}");
})             

                  $.ajax({ url: "Default.aspx/SaveListOrder", data: '{ids:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });                   };       </script> 


[其他解释]
有人吗,
[其他解释]
拖动了之后在鼠标放开的事件里面
加ajax将当前DIV的坐标信息发送到后台处理程序并存进数据库,这样下次打开的时候读取数据库信息里面div的坐标,应该能满足LZ的需求陈
[其他解释]
引用:
拖动了之后在鼠标放开的事件里面
加ajax将当前DIV的坐标信息发送到后台处理程序并存进数据库,这样下次打开的时候读取数据库信息里面div的坐标,应该能满足LZ的需求陈
   
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"   ClientIDMode="Inherit" >
        <ContentTemplate> 
            <ol id="list1" >
            <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2" 
                    onitemcommand="Repeater1_ItemCommand">
            <ItemTemplate>
           
             <li data-itemid='<%# Container.ItemIndex %>'  >
                   <div  style="border: 1px dashed #CCCCCC;"><span><%#Eval("wzname")%></span><asp:ImageButton runat="server" ID="xg"  ImageUrl="~/aa/20121023083858.jpg"   CommandName="xg"  ></asp:ImageButton><asp:ImageButton ID="de" runat="server" ImageUrl="~/aa/20121023084211.jpg"  /></div> 


             </li> 
            
            </ItemTemplate>
            </asp:Repeater>
            </ol>                    
        </ContentTemplate>
    </asp:UpdatePanel>
      <script type="text/javascript">        
              $("#list1").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
              function saveOrder() {
                  var data = $("#list1 li").map(function () { return $(this).data("itemid"); }).get();
                  $.ajax({ url: "Default.aspx/SaveListOrder", data: '{ids:["' + data.join('","') + '"]}', dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" });       
           };
      </script>
      

我是这样的该加入呢个标签里呢。具体怎么搞啊,
[其他解释]
引用:
引用:我是这样的该加入呢个标签里呢。具体怎么搞啊
简单看了下LZ的代码,没弄明白这个场景下实现拖动功能意义
如果LZ是需要实现上下li拖动的话 
dragEnd事件里面可以 each遍历循环出每个li拖动之后位置Index (这样需要LZ在数据表中添加一个index的字段,以后显示查询的时候根据index的大小排序)

将对应胡li……
自己解决了,还是挺感谢的,就你一个人分就全给你了吧

热点排行