javascript - JQuery UI 可排序在移动设备上禁用滚动

Question

fiddle - http://jsbin.com/asaVUmAP/1/edit

我一直在开发网站设计器应用程序，今天我添加了在属性面板中对对话框进行排序的功能。我的应用程序是为桌面和触摸设备构建的。 (我也在使用 JQuery UI Touch Punch )

应用 JQuery UI 的可排序后，我在 iPod 上对其进行了测试，并且我无法再在“.sort div”中包含的 div 中滚动。有谁知道解决这个问题的方法吗？

这是我正在使用的代码...

$('.sort-container').sortable({placeholder: "ui-state-highlight", helper:'clone', cancel: ".sort div"});

Answer 1

好的完成。

我有点太过分了，也开始修复其他东西......其中一些你可能会改变，比如页面高度等。我这样做是为了让你可以滚动整个栏而不是非常精确，同时仍然是能够滚动小框并对它们进行排序。

JSBin Code
<强> JSBin Demo - use on iPhone

Javascript:

// Toggle Dialog Visibility
$(".dialogname").toggle(function () {
    $(this).next().slideUp();
    $(this).html("  ▶" + $(this).attr('title'));
}, function () {
    $(this).next().slideDown();
    $(this).html("  ▼" + $(this).attr('title'));
});

$('.sort-container').sortable({
    items: '> .sort',
    placeholder: "ui-state-highlight",
    helper: "clone",
    scroll: true
});
$('.dialog').on('click mousedown mouseover select touchstart touchmove', function (evt) {
    var e = evt || window.event;
    e.stopPropagation();
});

CSS:

body {
    background:#ccc;
    height: 100%;
}
.sort-container {
    position:absolute;
    top: 0;
    right: 0;
    width: 50%;
    padding: 5%;
    overflow: auto;
    background: #202020;
}
.dialog {
    position: relative;
    margin: 10px auto;
    width: 90%;
    height: 150px;
    color: #ccc;
    background: #333;
    overflow: auto;
}
.dialog textarea {
    position:relative;
    width:90%;
    top:5%;
    left:5%;
    height:90%;
    border:0;
    padding:0;
    margin:0;
}
.dialogname {
    cursor:pointer;
    color:#fff;
    display:block;
    width:100%;
}

有很多 HTML，实际上不是必要的部分，因为我没有更改任何内容。

希望这有帮助:)