jquery拖动图像 [英] jquery drag image
本文介绍了jquery拖动图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先我的jQuery的经验是0.说过让我描述我想要实现的。我有固定的宽度/高度div。 div内的图像大小大。所以我想让图像可以拖动到该div内，以便用户可以看到整个图像。
可以帮助某人。请仔细阅读我的jQuery流畅程度。
解决方案
您可以使用以下内容：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/ TR / XHTML1 / DTD / XHTML1-transitional.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>拖动演示< / title>
< link href =css / screen.css =stylesheettype =text / cssmedia =screen/>
< style type =text / css>
<！ -
.container {
margin-top：50px;
cursor：move;
}
#screen {
overflow：hidden;
width：500px;
height：500px;
清除：两者;
border：1px solid black;
}
- >
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery .min.js>< /脚本>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js>< /脚本>
< script type =text / javascript>
$（function（）{
$（＃draggable）。draggable（）;
}）;
< / script>
< / head>
< body>
< div class =container>
< div id =screen>
< img src =images / 211.jpgclass =drag-imageid =draggable/>
< / div>
< / div>
< / body>
< / html>
i want to make a draggable image in jquery. first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.
can someone help. pls be a little elaborate about the procedure considering my jquery fluency.
解决方案
You can use the following;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.container {
margin-top: 50px;
cursor:move;
}
#screen {
overflow:hidden;
width:500px;
height:500px;
clear:both;
border:1px solid black;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="screen">
<img src="images/211.jpg" class="drag-image" id="draggable"/>
</div>
</div>
</body>
</html>
这篇关于jquery拖动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
