组合式js拖放示例 [英] combined drag and drop js examples
本文介绍了组合式js拖放示例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用以下代码，我尝试将拖放示例组合在一起，以将拖动限制在特定区域并添加其他可拖动对象.初始的三个拖动" -div的行为符合预期，不能拖动到容器" -div的外部.另一方面，后来添加了'drag'-div的则不这样做.
with the following code I tried to combine drag and drop examples for dragging restricted to a certain area and adding additional draggables. The inital three 'drag'-divs behave as expected and can't be dragged outside of the 'container'-div. The later on added 'drag'-divs on the other hand do not.
如何添加像前三个"drag" -div一样位于容器"内部的可拖动对象?
How can I add draggables which stay inside of 'container' like the first three 'drag'-divs?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="http://threedubmedia.com/inc/img/favicon.ico" rel="shortcut icon" />
<link href="http://threedubmedia.com/inc/css/base.css" rel="stylesheet" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<title>ThreeDubMedia · jquery.event.drag</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
var num = 1;
var $div = $('#container');
$('.drag')
.drag("start",function( ev, dd ){
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
})
.drag(function( ev, dd ){
$( this ).css({
top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
});
});
$('#add').click(function(){
$('<div class="drag"/>')
.text( num++ )
.appendTo( document.body )
.css({
top: Math.random() * 241 + $div.offset().top,
left: Math.random() * ( $( window ).width() - 100 ) + 20,
});
});
});
</script>
<h1>Live Drag Demo</h1>
<p>
<input type="button" id="add" value="Add a Box" />
to the screen, drag it around, thanks to "live" delegation.
</p>
<div id="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>
<style type="text/css">
.drag {
position: absolute;
border: 1px solid #89B;
background: #BCE;
height: 58px;
width: 58px;
cursor: move;
top: 120px;
text-align: center;
line-height: 58px;
}
#container {
height: 299px;
border: 1px dashed #888;
}
</style></body>
</html>
推荐答案
嗯，它有效.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<link href="http://threedubmedia.com/inc/img/favicon.ico" rel="shortcut icon" />
<link href="http://threedubmedia.com/inc/css/base.css" rel="stylesheet" />
<script src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/jquery.event.drop.live-2.2.js"></script>
<script src="http://threedubmedia.com/inc/js/excanvas.min.js"></script>
<title>ThreeDubMedia · jquery.event.drag</title>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
var num = 1;
var $div = $('#container');
$('.drag')
.drag("start",function( ev, dd ){
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
})
.drag(function( ev, dd ){
$( this ).css({
top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
});
});
$('#add').click(function(){
$('<div class="drag"/>')
.text( num++ )
.appendTo( document.body )
.css({
top: Math.random() * 241 + $div.offset().top,
left: Math.random() * ( $( window ).width() - 100 ) + 20,
})
.drag("start",function( ev, dd ){
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
})
.drag(function( ev, dd ){
$( this ).css({
top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
});
});
});
});
</script>
<h1>Live Drag Demo</h1>
<p>
<input type="button" id="add" value="Add a Box" />
to the screen, drag it around, thanks to "live" delegation.
</p>
<div id="container"></div>
<div class="drag" style="left:40px;"></div>
<div class="drag" style="left:120px;"></div>
<div class="drag" style="left:200px;"></div>
<style type="text/css">
.drag {
position: absolute;
border: 1px solid #89B;
background: #BCE;
height: 58px;
width: 58px;
cursor: move;
top: 120px;
text-align: center;
line-height: 58px;
}
#container {
height: 299px;
border: 1px dashed #888;
}
</style></body>
</html>
这篇关于组合式js拖放示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
