[android]可拖动的 jQuery 和滚动不工作︰ 移动设备

发布时间: 2017/3/17 1:11:16
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图找出如何使可拖动和 scollable 工作 simulatnoeusuly:

http://159.8.132.20/alldevice/

当您尝试拖动任一端的可拖动操作上的图像也开始,我想区,可以轻松地滚动,指当滚动 draggble 事件不应该在那里

 var $drop = $('#canvas-drop-area,#canvas-drop-area1'),
        $gallery = $('#image-list li'),
        $draggedImage = null,
        $canvasp1old = null,
        $canvasp2old = null;
    $gallery.draggable({
        //refreshPositions: true,
        scroll: false,
        start: function(e) {
            $draggedImage = event.target;
            $drop.css({
                'display': 'block'
            });
        },
        helper: function(e) {
            return $('<img src="' + $(this).find('img').attr("src") + '" width="'+imgwidth+'">');
        },
        stop: function() {
            $draggedImage = null;
        },
        revert: true
    });

解决方法 1:

这可能会帮助你。

HTML

$("#draggable").draggable({
            snap: true
        });
        $("#draggable2").draggable({
            snap: ".ui-widget-header"
        });
        $("#draggable3").draggable({
            snap: ".ui-widget-header",
            snapMode: "outer"
        });
        $("#draggable4").draggable({
            grid: [20, 20]
        });
        $("#draggable5").draggable({
            grid: [80, 80]
        });
.draggable {
        width: 90px;
        height: 80px;
        padding: 5px;
        float: left;
        margin: 0 10px 10px 0;
        font-size: .9em;
    }
    .ui-widget-header p,
    .ui-widget-content p {
        margin: 0;
    }
    #snaptarget {
        height: 600px;
        width: 200px;
    }
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<table>
        <tr>
            <td>
                <div id="draggable" class="draggable ui-widget-content">
                    <p>Default (snap: true), snaps to all other draggable elements</p>
                </div>

                <div id="draggable2" class="draggable ui-widget-content">
                    <p>I only snap to the big box</p>
                </div>
            </td>
            <td>
                <div id="snaptarget" class="ui-widget-header">
                    <p>I'm a snap target</p>
                </div>
            </td>
            <td>
                <div id="draggable3" class="draggable ui-widget-content">
                    <p>I only snap to the outer edges of the big box</p>
                </div>

                <div id="draggable4" class="draggable ui-widget-content">
                    <p>I snap to a 20 x 20 grid</p>
                </div>

                <div id="draggable5" class="draggable ui-widget-content">
                    <p>I snap to a 80 x 80 grid</p>
                </div>
            </td>
        </tr>
    </table>

javascript

$(function() {
        $("#draggable").draggable({
            snap: true
        });
        $("#draggable2").draggable({
            snap: ".ui-widget-header"
        });
        $("#draggable3").draggable({
            snap: ".ui-widget-header",
            snapMode: "outer"
        });
        $("#draggable4").draggable({
            grid: [20, 20]
        });
        $("#draggable5").draggable({
            grid: [80, 80]
        });
    });

对于移动,你可以使用 jquery ui touch 冲床它将帮助你和最好的解决办法是在这里

根据我所知 jquery 和 jquery ui 工作令人敬畏的对 159.8.132.20/alldevice/。

官方微信
官方QQ群
31647020