PhoneGap中文网

 找回密码
 立即注册
查看: 20384|回复: 6
打印 上一主题 下一主题

jquery mobile 怎么实现图片拖拽效果

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-8-23 21:58:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
jquery mobile 怎么实现图片拖拽效果下面为大家介绍一下
jquery mobile有个插件Drag And Drop,过程如下:

首先引入插件文件:
  1.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
  2.     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css" type="text/css" media="all" />
  3.     <script src="http://www.google.com/jsapi"></script>
  4.     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
复制代码
下面是一个简单例子:
  1. <script type="text/javascript">
  2.         $(document).ready(function() {
  3.             $(".draggable").draggable();
  4.         });
  5.     </script>

  6.     <div>
  7.     <div style="width:500px;height:500px;border:1px solid red;">
  8.         <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
  9.         <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
  10.     </div>
  11.     </div>
复制代码
it营
回复

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
沙发
 楼主| 发表于 2013-8-23 21:58:42 | 只看该作者
利用jQuery UI Draggable插件,测试例子很简单:

    <script type="text/javascript">
        $(function() {
            $("#draggable").draggable();
        });
    </script>

    <div id="draggable" class="ui-widget-content">
        <p>Drag me around</p>
    </div>
it营
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
板凳
 楼主| 发表于 2013-9-30 08:59:07 | 只看该作者
不知该说些什么。。。。。。就是谢谢
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
地板
发表于 2013-10-2 21:12:01 | 只看该作者
谢谢楼主,共同发展
回复 支持 反对

使用道具 举报

0

主题

108

帖子

116

积分

注册会员

Rank: 2

积分
116
5#
发表于 2013-10-5 00:20:39 | 只看该作者
不错不错,楼主您辛苦了。。。
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
6#
 楼主| 发表于 2013-10-6 15:05:06 | 只看该作者
支持一下:lol
回复 支持 反对

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
7#
 楼主| 发表于 2013-10-8 05:18:56 | 只看该作者
写的真的很不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-25 18:12 , Processed in 0.079091 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表