Привет всем. Прошу помощи. В даном примере я создал блоки с цыферками, и места куда можно их перетаскивать с помощю draggable. Помогите доделать программку, нужно что б после нажатия кнопки(кторой пока нету) выводилось сообщения с их номерами в порядке их места нахождение на екране, но не обязательно все кнопки должны быть использованы. Напрмер при таком расположении кнопок:
что б выводилось 6 7 8 4 3.
Библиотеки в коде импортуюся из интернета, не будет проблем с копи/пастом, не проходите мимо, буду очень благодарен.
|
Код:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
.button{
width: 100px; height: 50px; margin: 5px; margin-top: 10px; float:left;background:#ffecbe;
text-align:center; border-width:3px; border-color: #103050; border-style: dashed;
}
.window{
margin: 5px auto;
width:500px; height: 400px;
background:#9dbed4
}
.main
{
width:550px; height:700px;
background:#F5F5DC
}
.separator{
width: 450px; height: 50px; margin: 30px auto;
border-width:3px; border-color: #103050; border-style: dashed;
}
.toolbar{
margin: 5px auto;
width:500px;
height:160px;
}
</style>
<script type="text/javascript">
$(function(){
$(".button").draggable({snap:".separator", snapMode: "inner", stack: ".button"});
});
</script>
</head>
<body>
<div class ="main">
<div class="window">
<div class=separator></div>
<div class=separator></div>
<div class=separator></div>
<div class=separator></div>
</div>
<div class=toolbar>
<div id="1" class="button">1</div>
<div id="2" class="button">2</div>
<div id="3" class="button">3</div>
<div id="4" class="button">4</div>
<div id="5" class="button">5</div>
<div id="6" class="button">6</div>
<div id="7" class="button">7</div>
<div id="8" class="button">8</div>
</div>
</div>
</body>
</html> |
