移动设备上的JQuery UI可排序禁用滚动

Question

小提琴 - 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，因为我没有更改任何HTML，所以不是必需的部分。

希望这会有所帮助：）