Переместить объект
Добрый день. Я начал осваивать javascript и столкнулся с проблемой - не работает функция moveObjTo. При нажатии на кнопку, кнопка должна перемещаться, но она не двигается. Подскажите, в чем ошибка?
<!DOCTYPE html>
<html>
<body>
<p>Click the button to move it.</p>
<button id="myButton" onclick="myFunction()">Click to move</button>
<script>
function myFunction()
{
moveObjTo('myButton',115,115);
}
</script>
</body>
</html>
|
Цитата:
|
А нету в JavaScript функции moveObjTo. Тот пример, на который ты опирался, использует какую то библиотеку. Скачай и подключи эту библиотеку или делай по другому
|
Понятно, а какие можно использовать встроенные функции для перемещения объекта?
|
andrei0077,
поиск: анимация |
Пытаюсь сделать через left, всё равно не работает.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to move it.</p>
<button id="myButton" onclick="myFunction()">Click to move</button>
<script>
function myFunction()
{
myButton.style.left = myButton.style.left + 50;
}
</script>
</body>
</html>
|
andrei0077,
читали доки невнимательно ! здесь <button id="myButton" onclick="myFunction()"> никакого myButton.style нет! Стили и классы, getComputedStyle |
andrei0077,
<!DOCTYPE html>
<html>
<body>
<p>Click the button to move it.</p>
<button id="myButton" onclick="myFunction()" style=" left: 50px; position: relative">Click to move</button>
<script>
function myFunction()
{
myButton.style.left = parseFloat(myButton.style.left) + 50 + 'px';
}
</script>
</body>
</html>
|
Внерамочная, автозагружаемая, автономная функция таскания чего угодно куда хочешь. (с) я
function DragElems(elemtype) {
var x =0;
var y =0;
var oX =0;
var oY =0;
var pX =0;
var pY =0;
var obj =0;
var z =0;
var mouse=0;
var refresh = function(e) {
e = e || window.event;
if (e.type == 'mousedown') {
set(e);
oX = x;
oY = y;
obj.style.curor = 'move';
obj.style.zIndex = z++;
pos();
}
if (e.type == 'mouseup') {
obj.style.cursor = 'auto';
obj.style.border = "0";
}
if (e.type == 'mousemove') {
set(e);
obj.style.curor = "move";
obj.style.left = (x-oX+pX)+"px";
obj.style.top = (y-oY+pY)+"px";
}
};
var pos = function() {
pX = pY = 0;
var o = obj;
if(o.offsetParent) {
do {
pX += o.offsetLeft;
pY += o.offsetTop;
} while((o = o.offsetParent));
}
};
var set = function(e) {
if(e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else if(e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
};
var show = function() {
obj.style.border = "1px solid grey";
mouse = 1;
};
// автолодер
(function() {
var elems = document.getElementsByTagName(elemtype);
for(var i = 0; i < elems.length; i++) {
addEvent(elems[i], "mousedown",
function(e) {
obj = e.srcElement || e.target;
refresh(e);
z = 1;
mouse = window.setTimeout(show, 2000);
}
);
addEvent(elems[i], "mouseup",
function(e){
window.clearTimeout(mouse);
refresh(e);
mouse = 0;
}
);
addEvent(elems[i], "mousemove", function(e) {
if(mouse == 1)
refresh(e);
}
);
}
})(elemtype);
};
|
addEvent() это addEventListener()
|
| Часовой пояс GMT +3, время: 10:36. |