admin 发表于 2013-8-23 21:58:20

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

jquery mobile 怎么实现图片拖拽效果下面为大家介绍一下
jquery mobile有个插件Drag And Drop，过程如下：

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

    <div>
    <div style="width:500px;height:500px;border:1px solid red;">
      <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
      <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
    </div>
    </div>

admin 发表于 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>

admin 发表于 2013-9-30 08:59:07

不知该说些什么。。。。。。就是谢谢

phonegap100 发表于 2013-10-2 21:12:01

谢谢楼主，共同发展

phonegap100 发表于 2013-10-5 00:20:39

不错不错，楼主您辛苦了。。。

admin 发表于 2013-10-6 15:05:06

支持一下:lol

admin 发表于 2013-10-8 05:18:56

写的真的很不错
页: [1]
查看完整版本: jquery mobile 怎么实现图片拖拽效果