draggable droppable-easyui 实现可拖动菜单

问题描述

easyui 实现可拖动菜单

我想实现一个页面上可拖动的菜单,然后在数据库中记录顺序,下次进来的时候还是这个顺序,我现在实现了拖动,但是怎么获取顺序呢,求教

解决方案

说一下大致的步骤吧

因为题主需要保存列表顺序到数据库,这就涉及到了服务器端的数据发送和处理。

可以利用 jQuery 的 Ajax 来发送post请求给服务器,把每一个列表里面的元素设置一个 data-id 属性,属性值为它的唯一 ID,每次移动顺序的时候就向服务器发送 post 请求,也就是保存列表的顺序到服务器。

每次加载列表的时候,同时调用前面保存到数据库的顺序,然后给列表排序。

提供一下文档吧,你用到的是 jQuery 的 post http://api.jquery.com/jquery.post/

最后给题主推荐一个技术干货的APP,里面有不少前端开发相关的技术资源和教程,稀土掘金 http://gold.xitu.io/app

解决方案二:

?代码:
package com.oyzz.ch3_7;
import android.app.Activity;import android.app.AlertDialog;import android.graphics.Color;import android.os.Bundle;import android.widget.TextView;
/*欲在Layout里使用Gall......
答案就在这里:实现拖动,菜单

时间: 2024-12-21 12:09:31

draggable droppable-easyui 实现可拖动菜单的相关文章

easyui Draggable组件实现拖动效果_jquery

easyui做为一个封装了JQusey的UI插件,其实还是蛮好用的,至少省了像我这种渣渣很多时间. Draggable的加载方式有两种: 1,通过class加载,如下: <div id="box" class="easyui-draggable"></div> 通过JS加载,如下: $('#box').draggable(); 以上两点需要注意的是不管是'easyui-draggable',还是draggable 都是固定的,他们都是通过调用

轻松学习jQuery插件EasyUI EasyUI创建树形菜单_jquery

一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮_jquery

一.EasyUI创建简单的菜单 菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div

Easyui 菜单树实例 PHP+MySQL后台加载json

实例一 PHP+MySQL+Easyui tree菜单从后台加载json数据 实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求 <ul id="tree"></ul> 使用javascript加载数据 <script> $('#tree').tree( {     ur

jquery 菜单移动-这是一个菜单移动的操作,但是顺序a向上移动有错误,求指导,请问怎么控制不超出父节点

问题描述 这是一个菜单移动的操作,但是顺序a向上移动有错误,求指导,请问怎么控制不超出父节点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 无标题文档 #wrap{margin:20px auto;width: 500px;} #wrap li{list-st

Jquery插件 easyUI属性汇总_jquery

此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] false[否]                   2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel    

jQuery实现的跨容器无缝拖动效果代码_jquery

本文实例讲述了jQuery实现的跨容器无缝拖动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h

CSS垂直树形下拉菜单

css|菜单|下拉 第一步:建立菜单 首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么?其实只要一路写下去就OK了: 以下是引用片段: <ul>      <li><a href="#">Home</a></li>      <li><a href="#">About</a>        <ul>          <

PHP开发框架Yii Framework教程(43) Zii组件-Droppable示例

上篇介绍如果使用UI组件支持拖放,CJuiDroppable表示某个区域可以接受拖拉过来的UI组件,它封装了 JUI Droppable插件 . 我们修改上例,添加一个Droppable区域,当有UI组件拖放到该区域时,显示"Dropped". <?php $this->beginWidget('zii.widgets.jui.CJuiDroppable', array( 'options'=>array( 'drop'=>'js:function(event,