Question

另一个可拖动的div问题，但这次没有使用jQuery draggable UI。我不想使用jQuery的原因是它对于移动设备而言相当沉重。加载延迟约1秒，我不想要。目标是让这项工作在iPhone和iPad上运行。我一直在使用this示例，但我想为可拖动项目设置一个区域。该项目不应该能够到达该区域之外。有没有一种简单的方法来设置div不能被拖过的区域？您可以使用original示例或我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#touchme {
    width: 100px;
    height: 100px;
    background: lightgreen;
}
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.touch.compact.js"></script>
<script type="text/javascript">
var currentRotation=null;

function checkOrientAndLocation(){
    if(currentRotation != window.orientation){
        setOrientation();
    }
}

function setOrientation(){
    switch(window.orientation){
        case 0:
            orient = 'portrait';
            break;
        case 90:
            orient = 'landscape';
            break;
        case -90:
            orient = 'landscape';
            break;
    }
    currentRotation = window.orientation;
    document.body.setAttribute("orient",orient);
    setTimeout(scrollTo,0,0,1);
}

$().ready(function(){
    setInterval(checkOrientAndLocation,1000);
    $('#touchme').touch({
        animate: false,
        sticky: false,
        dragx: false,
        dragy: true,
        rotate: false,
        resort: false,
        scale: false
    });
});
</script>
</head>
<body>
    <div id="touchme">Drag me!</div>
</body>
</html>

或者我接受的另一个解决方案是，如何减少我需要使用的3个不同库的大小来实现相同的目标。以下是我使用的库：jquery-1.6.2.min.js（94 kb），jquery-ui-1.8.16.custom.min（37 kb）和jquery.ui.touch（8 kb）。

设置可拖动项目的区域（不使用jQuery draggable）

0 个答案: