Аналог события ActionScript onPress в javaScript
Разработал себе масштабируемый див, кому надо берите, но столкнулся с проблемой, не знаю как заменить событие onPress, чтобы масштабирование и прочие действия осуществлялись в результате клика мышкой и перетаскивания. Событие onMouseDown срабатывает единожды при нажатии на кнопку мыши, рекурсивный вызов функции тоже не помог. Подскажите как можно в джаве это реализовать?
<style>
.test
{
font-weight:bold;
width:120px;
height:100px;
top:100px;
left:100px;
position: absolute;
}
.test2
{
background-color:#00FF00;
}
.test3
{
background-color:#f00000;
}
</style>
<script language="JavaScript">
var xpos;
var ypos;
var mas_old_posX;
var mas_old_posY;
function imouse()
{
ypos=event.y+document.body.scrollTop;
xpos=event.x+document.body.scrollLeft;
}
function mas_drag()
{
document.onmousemove=imouse;
var mas_width_t=document.getElementById("1").currentStyle.width
document.getElementById(1).style.top=ypos-10;
document.getElementById(1).style.left=xpos-parseInt(mas_width_t)/2;
}
function mas_resize(axis)
{
document.onmousemove=imouse;
alert("1");
var mas_width = 0;
var mas_height = 0;
//растягивание по горизонтали
if(axis == 1)
{
mas_width=document.getElementById("1").currentStyle.width;
if(mas_old_posX>xpos)
{
document.getElementById("1").style.width=parseInt(mas_width)-2;
}
else
{
document.getElementById("1").style.width=parseInt(mas_width)+2;
}
mas_old_posX= xpos;
}
//растягивание по вертикали
if(axis == 2)
{
mas_height=document.getElementById("1").currentStyle.height;
if(mas_old_posY>ypos)
{
document.getElementById("1").style.height=parseInt(mas_height)-2;
}
else
{
document.getElementById("1").style.height=parseInt(mas_height)+2;
}
mas_old_posY= ypos;
}
//растягивание в обе стороны
if(axis == 3)
{
mas_width=document.getElementById("1").currentStyle.width;
mas_height=document.getElementById("1").currentStyle.height;
if(mas_old_posX>xpos)
{
document.getElementById("1").style.width=parseInt(mas_width)-2;
}
else
{
document.getElementById("1").style.width=parseInt(mas_width)+2;
}
if(mas_old_posY>ypos)
{
document.getElementById("1").style.height=parseInt(mas_height)-2;
}
else
{
document.getElementById("1").style.height=parseInt(mas_height)+2;
}
mas_old_posY= ypos;
mas_old_posX= xpos;
}
}
</script>
<html>
<body>
<table width = "100%" height = "100%" >
<tr>
<td id="pos">
 
</td>
</tr>
<tr>
<td>
<div id = "1" class = "test" >
<table width="100%" height="100%" border="1" class = "test3">
<tr class="test2" onMouseMove="mas_drag()">
<td colspan="2">
перетаскивание
</td>
</tr>
<tr>
<td>
123
</td>
<td width="20" onMouseMove="mas_resize(1)">
1
</td>
</tr>
<tr>
<td height="20" onMouseMove="mas_resize(2)">
1
</td>
<td onMouseMove="mas_resize(3)">
2
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
|
неужели никто не знает? :-?
|
Для размышления:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<div id="move"> </div>
<style type="text/css">
#move {
background: blue;
cursor:move;
cursor: -moz-grabbing;
position: absolute;
width: 54px;
height: 45px;
}
</style>
<script type="text/javascript">
$(function(){
var x = 0, y = 0, drag = 0; element = $('#move');
element.mousedown(function(event){
x = event.clientX-parseInt(element.css('left'));
y = event.clientY-parseInt(element.css('top'));
drag = true;
});
$(document).mousemove(function(event){
if(drag){
element.css({'left' : event.clientX-x + "px", 'top' : event.clientY-y + "px"});
}
});
$(document).mouseup(function(){
drag = false;
});
});
</script>
|
огромная человеческая благодарность, уважаемый monolithed, хотя бы несколько комментариев к коду, я в джаве не очень силен, а поисковик отказывается искать спецсимволы, поэтому, допустим, строка
$(function() не понятна, что означает знак $ перед определением функции? |
Этот код я написал с использованием библиотеки jQuery. Если вам интересно, знать что это и с чем едят - лучше всего на проштудировать документацию на офсайте. Однако перевести это на чистый JS труда особого не должно составить, т.к. все очень просто
|
| Часовой пояс GMT +3, время: 20:27. |