Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   ВЫДЕЛЯТОР как в виндовсе (https://javascript.ru/forum/misc/51961-vydelyator-kak-v-vindovse.html)

accept 27.11.2014 17:06
ВЫДЕЛЯТОР как в виндовсе
 
http://jsfiddle.net/0tfxdp3a/
помогите, не могу понять, как дальше? ? выделятор нужен точно как в виндовсе - чтоб менялась ширина/высота при перемещении слева/вверх/вниз, а не только вправо

рони 27.11.2014 17:27
accept,
:-? 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    #line{
		position: absolute;
		width: 0px;
		height: 0px;
		background: rgba(0,90,255,0.25);
		border: 1px solid rgba(0,114,255,0.5);
		box-sizing: border-box;

	}
  </style>



<script>
window.onload = function() {
    var target = document.getElementById("line");
    document.onmousedown = function(e) {       
        var x = e.pageX;
        var y = e.pageY;
        document.onmousemove = function(e) {
            target.style.width = Math.abs(e.pageX - x) + "px";
            target.style.height = Math.abs(e.pageY - y) + "px";
            target.style.left = (e.pageX < x ? e.pageX : x) + "px";
            target.style.top = (e.pageY < y ? e.pageY : y)+ "px";
        }; 
        return false
    };
    document.onmouseup = function() {
        target.style.width = 0 + "px";
        target.style.height = 0 + "px";
        document.body.style.cursor = "auto";
        document.onmousemove = null
    }
};</script>


</head>
<body>
  <div id="line"></div>
</body>
</html>

danik.js 27.11.2014 17:40
Цитата:
Сообщение от рони
document.onmousemove = function() {}
= null

рони 27.11.2014 17:45
danik.js,
как веть скажешь, сам так делаю ... а вдруг у ТС великие замыслы )))

рони 27.11.2014 17:48
:write: как от знака избавится кроме как Math.abs ?

ruslan_mart 27.11.2014 18:18
рони, по правой кнопке мыши выделение тоже срабатывает и при отпускании не убирается. Нужно сделать дополнительную проверку event.which. :)

рони 27.11.2014 18:37
Ruslan_xDD,
напиши проверку event.which не могу придумать вариант, вылетают системные предупреждения.

danik.js 27.11.2014 18:43
Цитата:
Сообщение от Ruslan_xDD
рони, по правой кнопке мыши выделение тоже срабатывает
В винде тоже ведь страбатывает. А вот со средней кнопкой - нет.
Цитата:
Сообщение от Ruslan_xDD
и при отпускании не убирается
В файрфоксе все норм. В хроме косепоры накосепорили как обычно. Давно отписывался про косяки райтклика, а эти гандоны делают вид что ниче не происходит.

danik.js 27.11.2014 18:45
Цитата:
Сообщение от рони
как от знака избавится кроме как Math.abs ?
А как квадратный корень извлечь кроме как Math.sqrt?

рони 27.11.2014 18:49
danik.js,
можно так но вдруг есть путь иной
var x= -5;
if (x < 0) x = -x;
alert(x);

ruslan_mart 27.11.2014 18:51 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    #line{
		position: absolute;
		width: 0px;
		height: 0px;
		background: rgba(0,90,255,0.25);
		border: 1px solid rgba(0,114,255,0.5);
		box-sizing: border-box;

	}
  </style>



<script>
window.onload = function() {
    var target = document.getElementById("line");
    document.onmousedown = function(e) {
        if(e.which > 1) return;
        var x = e.pageX;
        var y = e.pageY;
        document.onmousemove = function(e) {
            target.style.width = Math.abs(e.pageX - x) + "px";
            target.style.height = Math.abs(e.pageY - y) + "px";
            target.style.left = (e.pageX < x ? e.pageX : x) + "px";
            target.style.top = (e.pageY < y ? e.pageY : y)+ "px";
        }; 
        return false
    };
    document.onmouseup = function() {
        target.style.width = 0 + "px";
        target.style.height = 0 + "px";
        document.body.style.cursor = "auto";
        document.onmousemove = null;
    }
};</script>


</head>
<body>
  <div id="line"></div>
</body>
</html>

рони 27.11.2014 18:55
Ruslan_xDD,
ок! я всё пытался if(e.which != 1) return; полёт был непредсказуемый )))

danik.js 27.11.2014 19:19
Цитата:
Сообщение от рони
можно так но вдруг есть путь иной
Так как извлечь корень то?

danik.js 27.11.2014 19:19
Цитата:
Сообщение от рони
вдруг есть путь иной
Есть конечно: Math.abs(x)

Sweet 27.11.2014 19:28
Цитата:
Сообщение от danik.js
Так как извлечь корень то?
 
Math.pow(x, 0.5);

:D

danik.js 27.11.2014 19:48
Цитата:
Сообщение от Sweet
Math.pow(x, 0.5);
Пиля... Ну ок :-/ . Думаю мысль была понятна - зачем искать "иной" путь?

ruslan_mart 27.11.2014 19:54
danik.js, рони наверное имел ввиду, что возможно есть какой-нибудь иной простой путь преобразования в положительное число, через какой-нибудь оператор.

danik.js 27.11.2014 20:04
Math.abs() - куда проще то?

Math.sign(x)*x


:dance:

рони 27.11.2014 20:27
:) :write: 
var x= -51.6
alert((x>>x)*x||x);
var x= 51.6
alert((x>>x)*x||x);

bes 27.11.2014 20:37 
var x = -5
alert(~x + 1); //5

x = 5;
alert(~x + 1);//-5

рони 27.11.2014 21:00
bes,
ищу удаление минуса :write:

bes 27.11.2014 22:41
Цитата:
Сообщение от рони
bes,
ищу удаление минуса
предполагаю, изящным способом - дело гиблое, но может у тебя получится :)
к тому же для побитовых операций идёт преобразование ToInt32 , теряем кучу чисел
поэтому, думаю, изящнее и универсальнее Math.abs() всё-таки нет :)


Часовой пояс GMT +3, время: 23:09.