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

发布于 2024-12-10 17:11:39 字数 1964 浏览 0 评论 0原文

另一个可拖动 div 问题，但这次没有使用 jQuery 可拖动 UI。我不想使用 jQuery 的原因是它对于移动设备来说相当沉重。有大约 1 秒的加载延迟，这是我不想要的。目标是让这项功能在 iPhone 和 iPad 上运行。我一直在使用 this 示例，但我想为可拖动项目设置一个区域。该物品不应移出该区域。有没有简单的方法来设置div不能拖动的区域？您可以使用原始示例或我的代码：

<!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)。

原文

Another draggable div question but without using jQuery draggable UI this time. Reason why I don't want to use jQuery is that it's quite heavy for mobile devices. There's ~1 sec loading delay which I don't want. Goal is to make this work on iPhones and iPads. I have been using this example but I would like to set an area for the draggable item. The item shouldn't be able to go outside the area. Is there an easy way to set area which div can't be dragged over? You can use the original example or my code:

<!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>

Or another solution I accept is that how can I reduce the size of 3 different libraries which I need to use to achieve the same. Here are the libraries I have used: jquery-1.6.2.min.js (94 kb), jquery-ui-1.8.16.custom.min (37 kb) and jquery.ui.touch (8 kb).

分享到QQ

分享到微博