JQuery 拖拽 怎么样才能点击按钮 让数据从左边全部添加到右边

是点击一个按钮，让左边div的内容全部到右边的div里吗？这不属于拖拽呀~

设左边的div的id='left'，右边的div的div的id='right'，按钮的id='btn'

$("#btn").click(function(){

   $("#right").html($("#left").html())

   $("#left").html("")

})

如果右边的div之前有值，就把左边的div内容添加到右边的div的内容后面：

$("#btn").click(function(){

   $("#right").append($("#left").html())

   $("#left").html("")

})

Copyright © 1999-2020, CSDN.NET, All Rights Reserved

打开APP

Tianya_追心

关注

jgGrid实现 左移、右移、上移、下移 转载

2018-06-21 15:52:05

1点赞

Tianya_追心

码龄10年

关注

摘要：

最近在项目需求中通过jqGrid实现表格中的数据：左移、右移、上移、下移和置顶 等 *** 作。

下面记录实现的方法。

1

2

3

下面是代码片段：

右移（其实就是向一个grid容器中插入一行数据）：

//这个方法是获取ztree节点内容，插入到grid表中

function BindBtnRightMethod() {

//获取ztree对象

var zTreeObj = $.fn.zTree.getZTreeObj("ztreeId")

//获取光标选中的tree节点

var selectedNodes = zTreeObj.getSelectedNodes()

if (selectedNodes.length == 0) {

$.modalAlert(" *** 作失败！未选中节点。")

return} else {

//新增一行

var data = { KSID:"10", FLKSID:"101", KSMC: "消化科" }

addRowDataByGridElementId("jqGridId", data)}}

//摘要：//内容：向grid表中添加一行记录

function addRowDataByGridElementId(id, data) {

//获取当前grid中的表ID集合

var jqGrid = $('#' + id)var IDs = jqGrid.getDataIDs()

//定义标量，记录IDs中的rowid的最大值

var maxId = 0if (IDs.length >0) {

for (var i = 0i <IDs.lengthi++) {

var tmpId = jqGrid.getInd(IDs[i])

if (maxId <tmpId) {

maxId = tmpId

} } }

//这里是在给新增的rowid自定义一个有序值

var rowid= maxId + 1

//执行新增 *** 作

jqGrid.addRowData(rowid, data, rowid)

}

左移（其实是从grid表中删除一行）：

//摘要：//内容：按钮左移

function BindBtnLeftMethod() {

//删除选中行

var rowid = $("#jqGridId").jqGrid('getGridParam', 'selrow')

if (rowid == "" || rowid == undefined || rowid == null) {

$.modalAlert("移除行未选中！")

return} else {

var flag = $("#jqGridId").jqGrid("delRowData", rowid)

if (!flag) {

$.modalAlert("移除 *** 作失败！")

}

}}

上移：

//摘要：

//内容：按钮上移

function BindBtnUpMethod() {

    var obj = $("#jiGouGridList")

    var IDs = obj.getDataIDs()

    var rowid = obj.jqGrid('getGridParam', 'selrow')

    if (rowid == "" || rowid == null || rowid == undefined) {

        $.modalAlert("未选中行！")

        return false

    }

    var rowIndex = getRowIndexByRowId(IDs, rowid)

    if (rowIndex == 0) {

        $.modalAlert('已经置顶，不能上移!')

    } else {

        var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 2)

        var rowUpId = getRowIdByRowIndex(IDs, rowIndex - 1)

        var rowData = obj.jqGrid('getRowData', rowid)

        var rowUpData = obj.jqGrid('getRowData', rowUpId)

        //删除当前行

        obj.delRowData(rowid)

        obj.delRowData(rowUpId)

        //新插入一行

        obj.addRowData(rowid, rowData, "after", srcrowid)

        obj.addRowData(rowUpId, rowUpData, "after", rowid)

        //默认再选中新增的这个行

        obj.setSelection(rowid)

    }

}

//摘要：

//内容：根据rowid，获取索引值

function getRowIndexByRowId(Ids, id) {

    var index = 0

    for (var i = 0i <Ids.lengthi++) {

        if (Ids[i] == id) {

            index = i

        }

    }

    return index

}

//摘要：

//内容：根据索引值获取rowid值

function getRowIdByRowIndex(Ids, index) {

    var rowid = ""

    for (var i = 0i <Ids.lengthi++) {

        if (i == index) {

            rowid = Ids[i]

        }

    }

    return rowid

}

下移：

//摘要：

//内容：按钮下移

function BindBtnDownMethod() {

    var obj = $("#jqGridId")

    var IDs = obj.getDataIDs()

    var rowid = obj.jqGrid('getGridParam', 'selrow')

    if (rowid == "" || rowid == null || rowid == undefined) {

        $.modalAlert("未选中行！")

        return false

    }

    var rowIndex = getRowIndexByRowId(IDs, rowid)

    if (rowIndex == (IDs.length - 1)) {

        $.modalAlert('已经置底，不能下移!')

    } else {

        var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 1)

        var rowDownId = getRowIdByRowIndex(IDs, rowIndex + 1)

        var rowData = obj.jqGrid('getRowData', rowid)

        var rowDownData = obj.jqGrid('getRowData', rowDownId)

        //删除当前行

        obj.delRowData(rowid)

        obj.delRowData(rowDownId)

        //新插入一行

        obj.addRowData(rowDownId, rowDownData, "after", srcrowid)

        obj.addRowData(rowid, rowData, "after", rowDownId)

        //默认再选中新增的这个行

        obj.setSelection(rowid)

    }

}

打开CSDN APP，看更多技术内容

ListBox实现上移,下移,左移,右移的简单实例

主要介绍了ListBox实现上移,下移,左移,右移的简单实例。需要的朋友可以过来参考下，希望对大家有所帮助

JS与jQuery实现ListBox上移,下移,左移,右移 *** 作功能示例

主要介绍了JS与jQuery实现ListBox上移,下移,左移,右移 *** 作功能,涉及javascript与jQuery的事件响应、页面元素动态 *** 作等相关实现技巧,需要的朋友可以参考下

易语言汇编实现左移右移模块

易语言汇编实现左移右移模块源码系统结构:asm_rol,asm_ror,asm_rcl,asm_rcr,asm_shl,asm_shr,asm_not, ======程序集1 || ||------_启动子程序 || ||------_临时子程序 || ||------asm_rol || ||------asm_ror || ||-...

易语言源码易语言汇编实现左移右移模块源码.rar

有个小错误先跟你说下

<select multiple="multiple" id="select1" style="width:100pxheight:160px">

--->

<select multiple="multiple" id="select1" style="width:100pxheight:160px">

符号跑引号外面了。

另外，blur的用法不是这样的。

“这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的”

选中是由option的selected控制的，你可以尝试修改这一项，每次移动，把selectedIndex置为-1

---