`
keimon
  • 浏览: 75305 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

元素的拖拽与重排

jquery 
阅读更多

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul, li, div, span, img{margin: 0; padding: 0;}
        #mydiv
        {
            width: 900px;
            background-color: #fff;
            border: 1px solid #000;
            position: absolute;
            left: 100px;
            height: 500px;
            overflow: scroll;
        }
        #mydiv ul{position: relative; overflow: hidden; list-style: none; margin-top: 10px; margin-left: 10px;}
        #mydiv li{float: left; background-color: #e1e1e1; margin-left: 10px; margin-bottom: 10px; width: 200px; height: 226px; position: relative;}
        #mydiv span{display: block; padding: 4px 10px;}
        img{width: 200px; height: 200px; background-color: #999;}

        .moveEle{position: absolute; z-index: 2; background-color: #e1e1e1; width: 200px; height: 226px; left: 0; right: 0;}
    </style>
    <script src="../../jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">
    <ul>
        <li class="">
            <span>1</span>
            <img src="images/img1.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>2</span>
            <img src="images/img2.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>3</span>
            <img src="images/img3.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>4</span>
            <img src="images/img4.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>5</span>
            <img src="images/img5.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>6</span>
            <img src="images/img6.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>7</span>
            <img src="images/img7.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>8</span>
            <img src="images/img8.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>9</span>
            <img src="images/img9.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>10</span>
            <img src="images/img10.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>11</span>
            <img src="images/img11.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>12</span>
            <img src="images/img12.jpg" width="200" height="200"/>
        </li>
    </ul>
</div>
<script src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
    /**
     *元素移动效果
     * made by keimon
     */
    $(function () {
        var _bool = false, //鼠标是否按下
             cloneEle,
             moveEle,
             evtX,
             evtY;
        $('ul li').on('mousedown', function (e) {
            _bool = true;
            cloneEle = $(this).clone(true);
            moveEle = "<div class='moveEle'>"+cloneEle.html()+"</div>"; //移动的新元素
            $('body').append(moveEle);
            $(this).html("").addClass('emptyEle'); //空元素
            evtX = e.pageX;
            evtY = e.pageY;
            $('.moveEle').css('left', evtX + 'px');
            $('.moveEle').css('top', evtY + 'px');
        });
        $(document).delegate('li','mousemove', function (e) {
            if (!_bool) {
                return false
            }
            evtX = e.pageX;
            evtY = e.pageY;
            $('.moveEle').css('left', evtX + 'px');
            $('.moveEle').css('top', evtY + 'px');
            if($(e.currentTarget).hasClass('emptyEle')){
                return false;
            }else{
                var curIndex = $('ul li').index($(e.currentTarget));
                var empIndex = $('ul li').index($('.emptyEle'));
                if(curIndex<empIndex){
                    $(e.currentTarget).before($('.emptyEle'));
                }else{
                    $(e.currentTarget).after($('.emptyEle'));
                }
            }
        });
        $(document).bind('mouseup', function () {
            if (_bool) {
                cloneEle.css({'left':'auto', 'top':'auto'});
                $('.emptyEle').replaceWith(cloneEle);
                $('.moveEle').remove();
                _bool = false;
            }
        })
    })
</script>
</body>
</html>

0
顶
0
踩
分享到：
常用示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DragSortGridView拖动重排GridView

    拖动重排功能对于某些应用来说是至关重要的，比如个人收藏夹、任务列表或者自定义设置界面。DragSortGridView实现了这一特性，让用户可以直接通过手势将网格中的元素移动到新的位置，实时更新显示顺序，无需后台操作...

    reactnativesortablegrid一个reactnative的拖拽重排网格视图

    由于JavaScript与原生平台之间的桥接，开发者可以在不离开JavaScript环境的情况下调用原生API，极大地提高了开发效率。 拖放功能是一种常见的交互模式，让用户能够通过直接操作来改变元素的顺序或位置。在React ...

    jQuery拖动元素并对元素进行重新排序

    拖动元素并对元素进行重新排序是一种常见的交互方式，它提高了用户体验，使得用户能够直观地对页面上的元素（如图片、列表项等）进行重新组织。jQuery作为一个流行的JavaScript库，提供了一套简单而强大的API，使得...

    可拖动重排位置的网格布局效果

    "可拖动重排位置的网格布局效果"就是这样一个功能，它允许用户通过拖放操作来改变网格中元素的位置，为用户提供了一种高度自定义的体验。这个功能在很多应用场景中都非常实用，比如应用的主界面、图片库或者任务管理...

    网页层拖动实例(ASP.NET+AJAX)

    这种方式比直接修改元素的`left`和`top`属性性能更好，因为它减少了重排和重绘的次数。 7. **响应式设计**：确保拖动功能在不同设备和屏幕尺寸上都能正常工作，需要考虑响应式布局和触屏设备的拖动事件。 总的来说...

    word2021重排或移动形状间的连接线.docx

    在Word 2021中，形状和图表的使用大大丰富了文档的表现力，而连接线则是连接不同形状的关键元素，使得信息流程或关系展示更加直观。本文将详细讲解如何在Word 2021中重排或移动形状间的连接线。 连接线是Word 2021...

    Jquery类似Win7的桌面图片拖拽

    这涉及到复杂的碰撞检测和元素重排。 3. **图片预览**: 在拖动过程中，可以显示一个缩略图预览，增强用户的感知。 4. **拖放确认和撤销**: 用户可以撤销操作，将图片移回原处。这通常通过`revert`选项配合`drop`...

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

    在`onDragStart`事件中，我们可以设置数据传输（data transfer）对象，以携带当前被拖动元素的信息。`onDragOver`通常用来处理元素间的悬停效果，而`onDrop`则是执行实际的排序操作。 为了实现自动排序，我们需要在...

    Android-滑动和拖动支持的RecyclerView并带有撤销动作

    这个项目“Android-滑动和拖动支持的RecyclerView并带有撤销动作”着重于实现用户友好的交互功能，包括滑动删除、拖动排序以及撤销操作，这些都是提高用户体验的关键元素。 滑动删除（Swipe-to-Dismiss）功能允许...

    vc节点拖动排序树

    在IT行业中，"vc节点拖动排序树"是一种常见的用户界面交互设计，它允许用户通过直接拖放节点来改变树形结构中元素的顺序。这种功能常见于各种数据管理工具、项目管理软件以及编程IDE中，提升了用户体验并使得数据...

    可做拼图游戏的鼠标拖拽图片更换位置js代码

    在这个文件中，我们可能会看到`&lt;img&gt;`标签用于展示图片，以及可能存在的`&lt;div&gt;`元素作为图片的容器，用于实现拖拽效果。`img`目录则包含所有用于游戏的图片资源，这些图片会被引用到`index.html`中。 接着，`js`...

    css 3D魔方 （可拖动）

    7. **交互与事件**：尽管这个案例是纯CSS实现，但实际应用中，我们可能会用JavaScript来监听用户的鼠标拖动事件，动态更新CSS3的变换属性，实现更流畅的交互体验。 8. **性能优化**：大量使用3D变换可能会影响页面...

    Ajax弹出漂亮可拖动的提示层(窗)效果

    ### Ajax弹出漂亮可拖动的提示层(窗)效果：深入解析与实现 #### 核心知识点概览 在Web开发中，Ajax技术（Asynchronous JavaScript and XML）被广泛应用于实现网页的局部刷新，无需整个页面重载即可更新部分数据。...

    虚拟仪器labview分组的数据PPT学习教案.pptx

    1. 在前面板上直接创建数组控件，通过拖动深蓝色的手柄调整数组大小。 2. 在程序框图中创建数组常量，初始为空，需手动赋值。 3. 使用操作工具或编辑文本工具逐个为数组元素赋值，未赋值的元素会自动填充默认值。 4....

    jQuery网格布局图片拖到排序代码.zip

    每当你移动一个元素，你需要重新排序数组并更新DOM，确保所有图片的位置与数组顺序一致。 4. **DOM操作**：jQuery简化了对DOM（Document Object Model）的操作，使得插入、删除和修改元素变得简单。在拖放过程中，...

    js div move

    9. **性能优化**：对于复杂的动画，可能需要考虑性能优化，例如避免不必要的DOM操作，减少重排和重绘。 通过阅读和实践“js div move”的相关教程或源码，开发者可以提高JavaScript交互设计能力，掌握网页动态效果...

    Android-BoardView是一个自定义视图实现拖放重新排列列表和板中的项目

    3. **列重排**：不仅限于在列内部移动元素，还可以将整个列拖放到其他位置，改变列的顺序。 4. **事件监听**：提供了丰富的事件回调，开发者可以通过监听拖放操作来处理相应的业务逻辑。 **三、使用方法** 1. **...

Magicbox
Global site tag (gtag.js) - Google Analytics