Еще один перетаскиваемый вопрос div, но без использования перетаскиваемого пользовательского интерфейса jQuery. Причина, по которой я не хочу использовать jQuery, заключается в том, что он довольно тяжел для мобильных устройств. Задержка загрузки ~ 1 сек, а я не хочу. Цель состоит в том, чтобы заставить это работать на iPhone и iPad. Я использовал этот пример, но я хотел бы установить область для перетаскиваемого элемента. Предмет не должен выходить за пределы области. Есть ли простой способ установить область, которую 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 кб), jquery-ui-1.8.16.custom.min (37 кб) и jquery.ui.touch ( 8 кб).