Форум

Slavenin · #1 (**permalink**) 20.11.2010, 01:00

Разработал себе масштабируемый див, кому надо берите, но столкнулся с проблемой, не знаю как заменить событие 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">
&nbsp
</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>

Slavenin · #2 (**permalink**) 20.11.2010, 18:12

неужели никто не знает?

monolithed · #3 (**permalink**) 20.11.2010, 19:20

Для размышления:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<div id="move">&nbsp;</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>

Slavenin · #4 (**permalink**) 20.11.2010, 21:06

огромная человеческая благодарность, уважаемый monolithed, хотя бы несколько комментариев к коду, я в джаве не очень силен, а поисковик отказывается искать спецсимволы, поэтому, допустим, строка
$(function() не понятна, что означает знак $ перед определением функции?

monolithed · #5 (**permalink**) 20.11.2010, 21:34

Этот код я написал с использованием библиотеки jQuery. Если вам интересно, знать что это и с чем едят - лучше всего на проштудировать документацию на офсайте. Однако перевести это на чистый JS труда особого не должно составить, т.к. все очень просто

Форум

Справочник

Discord чат

Курсы javascript