4、jQuery插件之dragdrop拖放插件

喜欢ヅ旅行 2022-06-15 06:48 159阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
        <script src="jquery.min.js"></script>

<script src=" [jquery-ui.js][]"></script>

<style>  
        .div1,.div2,.div3\{  
            height: 100px;  
            width: 100px;  
            position: absolute;  
        \}  
        .div1\{  
            top:0;  
            left: 0;  
        \}  
        .div2\{  
            top:200px;  
            left: 0;  
        \}  
        .div3\{  
            top:400px;  
            left:0;  
        \}  
        img\{  
            width:100px;  
            height: 100px;  
        \}  
        .div4\{             
            right: 200px;  
            top:100px;  
            border: 1px \#f37a0e dashed;  
            height: 304px;  
            width: 100px;  
            position: absolute;  
        \}  
        .div5\{  
            height: 100px;  
            border-bottom: 1px dashed \#f37a0e;  
        \}  
        .div6\{  
            height: 100px;  
            border-bottom: 1px dashed \#f37a0e;  
        \}  
        .div7\{  
            height: 100px;  
        \}  
        </style>  
    </head>  
    <body>  
    <div class="div1">  
        <img src="1.jpg"/>  
    </div>  
    <div class="div2">  
        <img src="2.jpg"/>  
    </div>  
    <div class="div3">  
        <img src="3.jpg"/>  
    </div>  
    <div class="div4">  
        <div class="div5"></div>  
        <div class="div6"></div>  
        <div class="div7"></div>  
    </div>  
    </body>  
    <script>  
        $(document).ready(function()\{  
            $('.div1').draggable();//拖动图片  
            $('.div2').draggable();//拖动图片  
            $('.div3').draggable();//拖动图片  
  
            $('.div5').click(function()\{//点击某个位置，对应的图片放在该位置  
                $tar = $(this);  
                $tar.droppable(\{  
                    drop:$('.div1').animate(\{  
                        'top':$tar.offset().top+'px',  
                        'left':$tar.offset().left+'px'  
                    \})  
                \});  
            \})  
  
            $('.div6').click(function()\{  
                $tar = $(this);  
                $(this).droppable(\{  
                    drop:$('.div2').animate(\{  
                        'top':$tar.offset().top+'px',  
                        'left':$tar.offset().left+'px'  
                    \})  
                \});  
            \})  
  
            $('.div7').click(function()\{  
                $tar = $(this);  
                $(this).droppable(\{  
                    drop:$('.div3').animate(\{  
                        'top':$tar.offset().top+'px',  
                        'left':$tar.offset().left+'px'  
                    \})  
                \});  
            \})  
             
        \});  
    </script>

</html>

[jquery-ui.js]: http://jqueryui.com/droppable/

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery插件

学习要点： 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规

谁借莪１个温暖的怀抱￠/ 2022年08月18日 15:12/ 0 赞/ 325 阅读

相关 JQuery插件获取URL插件

JQuery插件获取URL中GET请求参数 / JQuery插件：获取浏览器GET参数请求，返回一个数组 @author NICK @date 2016/0

我就是我/ 2022年07月17日 02:20/ 0 赞/ 364 阅读

相关 5、jQuery插件之jqzoom放大镜插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

待我称王封你为后i/ 2022年06月15日 06:49/ 0 赞/ 273 阅读

相关 4、jQuery插件之dragdrop拖放插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

喜欢ヅ旅行/ 2022年06月15日 06:48/ 0 赞/ 160 阅读

相关 3、jQuery插件之datetimepicker时间插件

[datetimepicker 插件用法及参数说明][datetimepicker] // 选择时间和日期 $(".form-datetime").datetimep

短命女/ 2022年06月15日 06:47/ 0 赞/ 752 阅读

相关 1、jQuery插件之bxSlider幻灯片插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

谁践踏了优雅/ 2022年06月15日 06:45/ 0 赞/ 251 阅读

相关前端插件之拖拽

1.拖拽的插件很多，其实我们只要明白他的原理，就不难了：之所以形成拖拽的效果，是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界，上边界的距离disX

阳光穿透心脏的1/2处/ 2022年06月09日 08:22/ 0 赞/ 386 阅读

相关 16、jQuery插件之Slick幻灯片插件

简介 slick 是一个基于 jQuery 的幻灯片插件，具有以下特点：支持响应式浏览器支持 CSS3 时，则使用 CSS3 过度/动画支持移动设备滑动

╰+哭是因爲堅強的太久メ/ 2022年06月09日 01:26/ 0 赞/ 1127 阅读

相关 jquery拖放排序插件

最近在更改以前的旧项目，老板要求新增一个拖放排序的功能。但是因为之前项目是用jquery做的，牵扯到太多的DOM结构，更改起来太麻烦了，所以只能借助插件了。原本是打算使用j

柔情只为你懂/ 2022年06月03日 04:13/ 0 赞/ 210 阅读

相关 jQuery-插件

写插件先看看jqeury的插件如何写，先了解一下如何写插件的代码。 jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQ

红太狼/ 2021年05月12日 11:51/ 0 赞/ 883 阅读