Статті / Технології

WEB-КОНСТРУЮВАННЯ

24 січня 2022
MORENKO OLEKSII

File: index.html – стартовий файл

<html>
<head>
<meta charset="windows-1251">
<title>Керовані об'єкти</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>За допомогою миші встановіть фігуру на дошку</h2>
<img src="./pic/horsef.gif" width=258 height=258 vspace=10 hspace=10 border=0 title="Шахівниця">
<img draggable="true" src="./pic/horsew.gif" style="position: absolute;left: 350px;top: 300px;z-index: 0;" width=47 height=61 border=0 id=horse1 title="Білий кінь">
<img draggable="true" src="./pic/horseb.gif" style="position: absolute;left: 350px;top: 200px;z-index: 0;" width=47 height=61 border=0 id=horse2 title="Чорний кінь">
<script language="javascript" src=app.js></script>
</body>
</html>

File: style.css – оформлення сторінки

body
{
background: #EEE5DB;
margin: 25;
padding: 25;
width: 1000px;
height: 1000px;
}
[draggable]
{
cursor: move;
}

File: app.js програмний код сторінки

var  dragndrop=(function(){
var myX='';
var myY='';
var whichArt='';
function moveStart(e){
whichArt=e.target;
myX=e.offsetX===undefined?e.layerX:e.offsetX;
myY=e.offsetY===undefined?e.layerY:e.offsetY;
whichArt.style.zIndex=1;
}
function moveDragOver(e){
e.preventDefault();
}
function moveDrop(e){
e.preventDefault();
whichArt.style.left=e.pageX-myX+'px';
whichArt.style.top=e.pageY-myY+'px';
}
document.querySelector('body').addEventListener('dragstart',moveStart,false);
document.querySelector('body').addEventListener('dragover',moveDragOver,false);
document.querySelector('body').addEventListener('drop',moveDrop,false);
})();

12345

Якщо ви помітили помилку чи неточність, виділіть фрагмент тексту та натисніть Ctrl+Enter.

 

Автора Категорію Публікацію

493

Умови використання матеріалів сайту

Використання матеріалів можливе лише за умови активного гіперпосилання на UaModna ( див. Правила* ). Для генерації коду посилання натисніть на кнопку

Скопіюйте цей код на ваш сайт, або блог:

Думки, позиції, уподобання та заклики, опубліковані на нашому сайті, є власністю авторів і можуть не співпадати з поглядами редакції uamodna.com

UA Modna 0
Повідомити про помилку