Показать сообщение отдельно
  #12 (permalink)  
Старый 27.05.2013, 05:03
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

dragable при помощи деректив

идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
<!doctype html>
<html ng-app="myApp">
  <head>
    <style>
               .noselect {
		  -webkit-touch-callout: none;
		    -webkit-user-select: none;
		     -khtml-user-select: none;
		       -moz-user-select: none;
		        -ms-user-select: none;
		         -o-user-select: none;
		            user-select: none;
		}         
                .block{
                   width:50px;
                   height:50px;
                   cursor:move;
                }
    </style>

    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script language="javascript" type="text/javascript">
  
      //Обьявим модуль
      var myApp=angular.module('myApp', []);

	  //создадим дерективу
      myApp.directive('dragable',function(){                
        
        return function(scope,element,attr){          

          //метод срабатывает при mouseMove
          function move(e){
			element[0].style.top=e.y+"px";
			element[0].style.left=e.x+"px";			
		  };

          // срабатывает при отпускании мыши
		  function mouseUp(){
				document.removeEventListener('mousemove',move);
				document.removeEventListener('mouseUp',mouseUp);
		  }

		  //подпишимся на клик по элементу          
          element.bind('mousedown',function(){            
			//выставим позицию в absolute вдруг нестоит :)
            element[0].style.position="absolute";

			//подпишимся на перемещения мыши
            document.addEventListener('mousemove',move);

			//подпишимся на отпускание мыши
			document.addEventListener('mouseup',mouseUp);

          })                                	           
        }
          
      });
    </script>
  </head>
    
  <body class="noselect">    
    <div dragable style="background-color:#999;" class="block">drag me</div>
    <div dragable style="background-color:#99F;" class="block">drag me</div>
    <div dragable style="background-color:#F99;"  class="block">drag me</div>
    <div dragable style="background-color:#9F9;" class="block">drag me</div>

    <div style="background-color:#000;color:white; cursor:auto;" class="block">no drag</div>
  </body>
   
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 27.05.2013 в 05:29.
Ответить с цитированием