Omnimaga
General Discussion => Technology and Development => Web Programming and Design => Topic started by: Ikkerens on October 04, 2011, 07:54:51 am
-
Wrote a little code which allows you to select elements within an html page (using a drag selection field)
All you have to do to make it "selectable" is add the selectable class :)
<html>
<head>
<title>Selection field</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var mouseX = 0, mouseY = 0, startX = 0, startY = 0, colliders = [];
window.onmousedown = function() {
//Defaults
$('#selector') .css('position', 'absolute')
.css('opacity', 0.50);
//Declarations
startX = mouseX;
startY = mouseY;
//Apply
$('#selector').css('left', startX);
$('#selector').css('top', startY);
//Show
$('#selector').show();
}
window.onmousemove = function(e) {
//Set mouse values
mouseX = e.pageX;
mouseY = e.pageY;
//Positioning values
var tX, tY, w, h;
//Calculate X
if ( (mouseX - startX) >= 0 )
{
tX = startX;
w = mouseX - startX;
}
else
{
tX = startX + ( mouseX - startX );
w = (mouseX - startX) * -1;
}
//Calculate Y
if ( (mouseY - startY) >= 0 )
{
tY = startY;
h = mouseY - startY;
}
else
{
tY = startY + ( mouseY - startY );
h = (mouseY - startY) * -1;
}
//Apply
$('#selector').css({ left: tX, top: tY, width: w, height: h });
//Check for collision
//Private function to detect collision (called twice, once horizontal, once vertical)
function cps(p1, p2) {
var x1 = p1[0] < p2[0] ? p1 : p2;
var x2 = p1[0] < p2[0] ? p2 : p1;
return x1[1] > x2[0] || x1[0] === x2[0] ? true : false;
}
//Store the selector position data in this array
var sel = [[tX, tX + w], [tY, tY + h]];
$.each(colliders, function(key, i) {
var selectionBorder = ( cps(sel[0], this[1]) && cps(sel[1], this[2]) ) ? '1px solid black' : '1px solid white';
if ( $('#selector').css('display') == 'block' )
{
$(this[0]).css('border', selectionBorder);
}
});
//Override
return false;
}
window.onmouseup = function() {
$('#selector').hide();
}
//Init
function init () {
$('#selector').hide();
$('.selectable').each(function (key, i) {
var pos = $(this).position();
colliders.push([this, [ pos.left, pos.left + $(this).innerWidth() ], [ pos.top, pos.top + $(this).innerHeight() ] ]);
});
};
</script>
</head>
<body onload="javascript:init();">
<div class="selectable" style="position:absolute;left:500px;top:500px;width:100px;height:100px;background-color:red;border:1px solid white;"></div>
<div class="selectable" style="position:absolute;left:800px;top:200px;width:100px;height:100px;background-color:blue;border:1px solid white;"></div>
<div style="background:lightblue;border:1px solid blue;display:none:position:absolute;width:0px;height:0px;left:0px;top:0px;z-index:9001" id="selector"></div>
</body>
</html>
Demo: http://www.walotech.com/nomnom.html
Edit 2: Added transparency, added red cube to test transparancy
Edit 3: Added collision detection, morphed it into a selection engine (couldn't resist :P), added blue cube to test multi-selection, people could use this in any application.
Edit 4: Moved the show() so that it doesn't flicker :)
Edit 5: Edited live demo to show potential and how selected items can be used.
Feel free to use this entire engine (with author credits), or snippets of it (no author credits needed)
-
nice.
-
I like it! I actually needed a drag-to-select engine for my Phinder project.
-
I like it! I actually needed a drag-to-select engine for my Phinder project.
Great! If you need help understanding the code (or customizing it), just give a shout ;)
-
Can you add like a button that, when pressed, sets all selected elements to display: none;? I would like to see how that would work. Also, I'm talking about the demo ;)
-
Can you add like a button that, when pressed, sets all selected elements to display: none;? I would like to see how that would work. Also, I'm talking about the demo ;)
Uploaded the new version, same demo link.