`

能拖动的list-------JS

 
阅读更多

以下只作为自己的笔迹记录

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        *{ margin: 0; padding: 0;  -moz-user-select:none;}

        ul{ margin: 100px; border: 1px solid #adff2f; list-style: none;}

        li{ height: 30px; line-height: 30px; padding: 0; list-style: none;}

        li:hover{ background: #bdb76b; cursor: move;}

    </style>

</head>

<body>

<ul id="outer_wrap">

    <li>test1</li>

    <li>test2</li>

<li>test3</li>

<li>test4</li>

<li>test5</li>

<li>test6</li>

<li>test6</li>

<li>test7</li>

<li>test8</li>

<li>test9</li>

<li>test11</li>

<li>test12</li>

<li>test14</li>

<li>test13</li>

<li>test15</li>

</ul>

<script type="text/javascript">

    function $(id){

        return document.getElementById(id);

    }

 

function getMousePos(e){

        return {

            x : e.pageX || e.clientX + document.body.scrollLeft,

            y : e.pageY || e.clientY + document.body.scrollTop

        }

    }

 

function getElementPos(el){

        return {

            x : el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,

            y : el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop

        }

    }

 

function getElementSize(el){

        return {

            width : el.offsetWidth,

            height : el.offsetHeight

        }

    }

 

    document.onselectstart = function(){

        return false;

    }

 

var MOVE = {};

    MOVE.isMove = false;

 

 

var div = document.createElement('div');

    div.style.width  = '400px';

    div.style.height = '1px';

    div.style.fontSize = '0';

    div.style.background = 'red';

 

    var outer_wrap = $('outer_wrap');

    outer_wrap.onmousedown = function(event){

 

var lis = outer_wrap.getElementsByTagName('li');

        for(var i = 0; i < lis.length; i++){

            lis[i]['pos']  = getElementPos(lis[i]);

            lis[i]['size'] = getElementSize(lis[i]);

        }

        event = event || window.event;

        var t = event.target || event.srcElement;

        if(t.tagName.toLowerCase() == 'li'){

            var p = getMousePos(event);

            var el = t.cloneNode(true);

            el.style.position = 'absolute';

            el.style.left = t.pos.x + 'px';

            el.style.top  = t.pos.y + 'px';

            el.style.width   = t.size.width + 'px';

            el.style.height  = t.size.height + 'px';

            el.style.border  = '1px solid #d4d4d4';

            el.style.background = '#d4d4d4';

            el.style.opacity = '0.7';

            document.body.appendChild(el);

 

            document.onmousemove = function(event){

                event = event || window.event;

                var current = getMousePos(event);

                el.style.left =t.pos.x + current.x - p.x + 'px';

                el.style.top  =t.pos.y + current.y - p.y+ 'px';

                document.body.style.cursor = 'move';

 

 

for(var i = 0; i < lis.length; i++){

                    if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']/2){

if(t != lis[i]){

                            MOVE.isMove = true;

                            outer_wrap.insertBefore(div,lis[i]);

                        }

 

                    }else if(current.x > lis[i]['pos']['x'] && current.x < lis[i]['pos']['x'] + lis[i]['size']['width'] && current.y > lis[i]['pos']['y'] + lis[i]['size']['height']/2 && current.y < lis[i]['pos']['y'] + lis[i]['size']['height']){

if(t != lis[i]){

                            MOVE.isMove = true;

                            outer_wrap.insertBefore(div,lis[i].nextSibling);

                        }

                    }

                }

            }

 

            document.onmouseup = function(event){

                event = event || window.event;

                document.onmousemove = null;

                if(MOVE.isMove){

                    outer_wrap.replaceChild(t,div);

                    MOVE.isMove = false;

                }

                document.body.removeChild(el);

                el = null;

                document.body.style.cursor = 'normal';

                document.onmouseup = null;

            }

        }

    }

</script>

</body>

</html>

分享到:
评论

相关推荐

    图片拖拽排序-纯原生js

    在本文中,我们将深入探讨如何实现一个纯原生JavaScript的图片拖拽排序功能。这个功能允许用户通过鼠标拖动来改变图片的顺序,提供了一种直观且用户友好的交互方式。我们将围绕“拖拽”和“JavaScript”这两个关键...

    【JavaScript源代码】vue element el-transfer增加拖拽功能.docx

    在Vue.js项目中,Element UI库的`el-transfer`组件是一个非常实用的工具,用于在两个列表之间进行数据传输。然而,原生的`el-transfer`并不直接支持拖拽排序功能。为了满足芯资管项目的需求,我们需要利用第三方库...

    JS实现图片拖拽排序(亲测可用)

    同时,确保插件在新图片加载后能正确地应用拖拽排序功能。可以使用`append`或`prepend`方法添加元素,然后再次调用`imageDragSort()`。 ```javascript $.ajax({ url: 'your-api-url', type: 'GET', success: ...

    微信小程序代码实现:拖拽排序列表

    同时,确保拖拽排序操作对用户是可见的,例如,可以通过改变拖动元素的背景色或边框来显示拖动状态。 总结来说,微信小程序实现拖拽排序列表的关键在于理解并巧妙运用`movable-view`和`movable-area`组件,以及正确...

    React-基于react的拖拽并自动排序

    `SortableList`将负责整个列表的管理和排序逻辑,而`DraggableItem`则处理单个项的拖拽行为。 `DraggableItem`组件通常会使用HTML5的`draggable`属性来开启拖拽功能,并通过React的事件处理器(如`onDragStart`、`...

    jquery.dragsort.js

    首先,jQuery Dragsort插件包含了三个核心文件:`jquery.dragsort.min.js`、`jquery-list-dragsort.js`和`jquery.dragsort.js`。`jquery.dragsort.min.js`是该插件的压缩版,体积更小,加载速度更快,适用于生产环境...

    基于Angular的拖拽排序实现

    在Angular框架中实现拖拽排序是一项常见的需求,它允许用户通过直观的拖放操作来调整元素的顺序。本文将深入探讨如何在Angular应用中实现这一功能,并基于提供的"dragSort-Angular-master"项目进行详细讲解。 首先...

    sortable拖拽吸附条件查询模板-前端拖拽元素并吸附保存(可删除筛选条件)全部代码

    在本文中,我们将深入探讨如何实现一个前端拖拽吸附条件查询模板,这主要涉及`sortable`库、JavaScript(JS)以及动态查询功能。这个模板允许用户通过拖拽元素来重新排序,并能吸附到特定位置,同时支持实时查询和...

    sortable-list-demo

    在"sortable-list-demo"这个项目中,它使用JavaScript技术来实现这一功能,使得用户可以方便地对`&lt;ul&gt;`列表进行排序。下面将详细介绍这个演示应用程序的工作原理和涉及的关键技术。 ### 1. JavaScript基础 ...

    【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx

    在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验,特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法,它允许我们优雅地实现拖放动画和排序。 首先,让...

    前端项目-react-sortable-hoc.zip

    `SortableElement`用于将单个列表项变为可拖动的元素,而`SortableList`则负责处理整个列表的排序逻辑。这两个组件通过props相互交互,确保了排序过程的正确性和流畅性。此外,该库还提供了一系列自定义选项,如排序...

    laravel-admin-listbox-sortable:ListboxSortable是基于Laravel-admin表单组件的扩展,实现了listbox的拖拽排序功能

    ListboxSortable for Laravel-admin 1.6+ListboxSortable是基于Laravel-admin表单组件的扩展,实现了listbox的拖拽排序功能。RequireLaravel-admin &gt;= 1.6Installation运行下面的命令安装:"composer require ckhan/...

    图片上传+拖动排序(vue2+elementUI+vuedraggable)

    Vue2是Vue.js框架的第二个主要版本,它是一个轻量级的前端JavaScript框架,用于构建用户界面。Vue2引入了虚拟DOM、组件化、响应式数据绑定等特性,使得开发更加高效和易于维护。 ### ElementUI介绍 ElementUI是一套...

    react-mutable-list:React的可拖动,可拖放和可删除列表组件

    一个预打包的版本,其中整个React库位于dist/list.js 例子 此示例显示用户如何处理onReorder和onRemove回调。 控制器负责管理传递到列表中的内容,并使用onReorder和onRemove回调处理列表中的相应事件。 import ...

    Angular-js-todolist:一个使用Angular-js的很棒的Todo-List

    **Angular-js-todolist** 是一个基于 **Angular.js** 的项目,它实现了一个功能完备的Todo List应用。这个应用展示了Angular.js在构建交互式、动态Web应用方面的强大能力。Angular.js是Google维护的一个开源框架,它...

    js拖拽排序并保存到数据库

    在JavaScript(JS)中实现拖拽排序功能,可以极大地提升用户交互体验,尤其是在管理列表、项或元素时。拖拽排序允许用户通过直观地拖动元素来改变它们的顺序,这种功能在各种Web应用中非常常见,比如任务管理器、...

    js实现的拖拽功能

    在本篇中,我们将深入探讨如何利用JavaScript实现拖拽功能,并结合CSS来优化用户体验。 首先,我们需要理解拖放涉及到的主要API。在JavaScript中,这些API主要包含在`HTML5`的`Draggable`属性和`dragstart`, `drag`...

    Restarant-list-google-map-api

    Vue.js是一个轻量级的前端JavaScript框架,以其易学易用、高性能和灵活性著称。它提供了一套声明式的数据绑定和组件系统,让开发者可以快速构建可复用、模块化的Web应用。 项目中的压缩包子文件“Restarant-list-...

    页面拖拽标签

    对于更复杂的拖拽应用场景,如多个元素拖拽、限制拖动范围、拖放排序等,可以使用jQuery UI的Draggable插件或Vue.js的vuedraggable库。这些库提供了一套完整的解决方案,简化了开发过程。 jQuery UI Draggable示例...

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    `vue-draggable`是基于Sortable.js封装的Vue组件,它允许我们在Vue应用中实现拖放功能,支持Vue 2.x。 首先,你需要通过npm安装`vue-draggable`库: ```bash npm install vuedraggable ``` 然后在你的组件中导入...

Global site tag (gtag.js) - Google Analytics