Resizable, draggable object in jquery. Possible?
I want to have an object which is both resizable and draggable. I'll need:
- X
- Y
- Size
of the object.
Is this possible?
There is an example on 开发者_运维技巧http://www.jsfiddle.net/davidThomas/DGbT3/1/ which gets the x and y of the draggable object. How can I also make it resizable?
Thanks
It's worth adding that this question is related to, and built on, this previous question: How to get the position of a draggable object?
Sure it is... jQuery UI is good for complex behaviors like drag and drop, resizing, selection and sorting.
With jQuery UI you can:
- Drag
- Drop
- Resize
- Sort
And you can everything chain together.
It is important for the resize feature that you include the jquery-ui.css file.
JSFIDDLE: http://jsfiddle.net/uQWRk/
Here is the full code for archive:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#dragThis').resizable({
stop: function(event, ui) {
var w = $(this).width();
var h = $(this).height();
console.log('StopEvent fired')
console.log('Width:'+w);
console.log('Height:'+h)
}
}).draggable(
{
containment: $('body'),
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
stop: function(){
var finalOffset = $(this).offset();
var finalxPos = finalOffset.left;
var finalyPos = finalOffset.top;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final X: ' + finalyPos);
}
});
$('#dropHere').droppable(
{
accept: '#dragThis',
over : function(){
$(this).animate({'border-width' : '5px',
'border-color' : '#0f0'
}, 500);
$('#dragThis').draggable('option','containment',$(this));
}
});
});
</script>
<style type="text/css">
#dragThis {
width: 6em;
height: 6em;
padding: 0.5em;
border: 3px solid #ccc;
border-radius: 0 1em 1em 1em;
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
#dropHere {
width: 12em;
height: 12em;
padding: 0.5em;
border: 3px solid #f90;
border-radius: 1em;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dragThis">
<ul>
<li id="posX"></li>
<li id="posY"></li>
<li id="finalX"></li>
<li id="finalY"></li>
</ul>
</div>
<div id="dropHere"></div>
</body>
</html>
See comments:
If you mean draggable, that something like this:
$( "#elem" ).resizable().draggable();
Size and position you can point with css (first time). Than you can change them and get (when you resize or move) with jQuery.
You can add options to draggable() and resizable() methods. Reference is here: http://jqueryui.com/demos/resizable/ and http://jqueryui.com/demos/draggable/
P.S. This code requires jquery-ui.js file and jquery-ui.css (because it draws a marker to resize)
P.P.S.
With your link: In JavaScript frame I added the line:
$('#dropHere').resizable();
And I added css-style in managed resources "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
And it worked!
加载中,请稍侯......
精彩评论