| |
|
|
| |
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Это JQuery-UI</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#drag {
overflow:hidden;
border:1px solid red;
padding:5px;
width:140px;
height:60px;
}
.cl1 { color: red }
.cl2 { text-decoration: underline }
</style>
<script type="text/javascript">
function SetDrag() { $("#drag").draggable(); };
function Ss() {
var o,s;
o=$("#drag");
alert('x='+o.left+', y='+o.top);
}
</script>
</head>
<body onLoad="SetDrag()">
<p>Вы можете перетаскивать элемент мышкой:</p>
<div id="drag" class="ui-corner-all ui-widget ui-widget-header">Попробуйте перетащить меня</div>
<p class="cl1 cl2" onClick="Ss()">Надо щелкнуть для получения информации о перетянутом блоке.</p>
</body>
</html>
|
Что нужно прописать вместо
alert('x='+o.left+', y='+o.top);
чтобы выводились координаты блока по нажатии на красный абзац? | |
| |
|
|
| |
|
|
| |
для: AlexShag
(09.01.2013 в 15:20)
| | |
$('.cl1').click(function() {
o = $("#drag");
alert('x='+o.left+', y='+o.top);
});
|
| |
| |
|
|
| |
|
|
| |
для: mihdan
(15.01.2013 в 22:51)
| | |
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Это JQuery-UI</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#drag {
overflow:hidden;
border:1px solid red;
padding:5px;
width:140px;
height:60px;
}
.cl1 { color: red }
</style>
<script type="text/javascript">
$('.cl1').click(function() {
o = $("#drag");
alert('x='+o.left+', y='+o.top);
});
function SetDrag() { $("#drag").draggable(); };
</script>
</head>
<body onLoad="SetDrag()">
<p>Вы можете перетаскивать элемент мышкой:</p>
<div id="drag" class="ui-corner-all ui-widget ui-widget-header">Попробуйте перетащить меня</div>
<p class="cl1">Надо щелкнуть для получения информации о перетянутом блоке.</p>
</body>
</html>
|
Сделал вот так. Вообще ничего не выводится. Даже alert не выскакивает. Что я не так сделал? | |
| |
|
|
| |
|
|
| |
для: AlexShag
(16.01.2013 в 18:53)
| | | чтобы alert "выскочил", надо весь скриптовой блок перенести ПОСЛЕ тега с классом "cl1",
иначе функция назначается ещё не существующему тегу
а вот чтобы в этом (уже "выскочившем") alert'e выводило хоть что-то, отличное от undefined - это надо спрашивать у знающих тарабарский JQuery-язык | |
| |
|
|
| |
|
|
| |
для: ЯСА
(16.01.2013 в 20:52)
| | |
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Это JQuery-UI</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#drag {
overflow:hidden;
border:1px solid red;
padding:5px;
width:140px;
height:60px;
}
.cl1 { color: red }
</style>
<script type="text/javascript">
function SetDrag() {
$("#drag").draggable();
$('.cl1').click(function() {
o = $("#drag");
alert('x='+o.left+', y='+o.top);
});
}
</script>
</head>
<body onLoad="SetDrag()">
<p>Вы можете перетаскивать элемент мышкой:</p>
<div id="drag" class="ui-corner-all ui-widget ui-widget-header">Попробуйте перетащить меня</div>
<p class="cl1">Надо щелкнуть для получения информации о перетянутом блоке.</p>
</body>
</html>
|
Переделал вот так. Теперь alert() выскакивает но всё с теми же undefined.
Так как же их побороть? Неужели нет способа? Зачем же тогда перетаскивание если я не могу отслеживать куда и чего я перетащил??? | |
| |
|
|
| |
|
|
| |
для: AlexShag
(17.01.2013 в 11:45)
| | | Жуквери так жуквери... Подключить - подключили, а как использовать забыли? )
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Это JQuery-UI</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#drag {
overflow:hidden;
border:1px solid red;
padding:5px;
width:140px;
height:60px;
}
.cl1 { color: red }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#drag").draggable();
$('.cl1').click(function() {
var o = $("#drag").position();
alert('x='+o.left+', y='+o.top);
});
})
</script>
</head>
<body>
<p>Вы можете перетаскивать элемент мышкой:</p>
<div id="drag" class="ui-corner-all ui-widget ui-widget-header">Попробуйте перетащить меня</div>
<p class="cl1">Надо щелкнуть для получения информации о перетянутом блоке.</p>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(17.01.2013 в 12:30)
| | | Премного благодарен. Я ведь только начинаю изучать "Жучку" :-)
За это время я нарыл вот это:
o=$("#drag");
alert(' x='+o[0].offsetLeft+', y='+o[0].offsetTop);
|
То же самое показывает. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(18.01.2013 в 12:19)
| | | ну потому что оффсетлефт и оффсеттоп - это чистый джаваскрипт, а Вы всем кагалом пытались добыть свойства left и top непосредственно из объекта, что странно. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(18.01.2013 в 12:49)
| | | Так никто ж и не спорит. Ваш метод кашернее. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(18.01.2013 в 13:05)
| | | Кошерно - вообще не подключать жуквери ради таких мелочей. Ну а подключив, использовать по-полной, чтобы оправдать расходы. ) | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(18.01.2013 в 13:17)
| | | Опять же никто не против. Я же просто учусь. Потому и примерчики маленькие. А вообще хочу сделать шахматный сервер. Так что "жучить" там будет чего :-) | |
| |
|
|
| |
|
|
| |
для: AlexShag
(18.01.2013 в 13:20)
| | | А на шахматном сервере будет бот для стесняющихся? )) | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(18.01.2013 в 13:29)
| | | Пока не думал.
У меня ещё такой вопрос.
А если вот так:
o=$(".drag").position();
alert(o.left+','+o.top);
|
То есть используем class, а не id и блоков с таким классом несколько. Как тогда узнать координаты каждого блока? Тот код что чуть выше показывает только координаты первого блока в DOMe. | |
| |
|
|
| |
|
|
| |
для: AlexShag
(18.01.2013 в 13:58)
| | | Если несколько, то обратиться к нему надо лично. Через this, например. Сейчас попробую станцевать.
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Это JQuery-UI, детка!</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.drag {
overflow:hidden;
border:1px solid red;
padding:5px;
width:140px;
height:60px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".drag").draggable({
drag: function() {
var o = $(this).position();
$(this).html('x='+o.left+', y='+o.top);
}
});
});
</script>
</head>
<body>
<p>Вы можете перетаскивать элемент мышкой:</p>
<div class="drag" class="ui-corner-all ui-widget ui-widget-header">Попробуйте</div>
<div class="drag" class="ui-corner-all ui-widget ui-widget-header">перетащить</div>
<div class="drag" class="ui-corner-all ui-widget ui-widget-header">меня</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(18.01.2013 в 14:46)
| | | Круть! Благодарю.
Я вот такое нарыл.
o=$(".drag");
o.each(function(indx){
alert(' block['+indx+'].left='+$(this).position().left+'\n block['+indx+'].top='+$(this).position().top);
if(indx==1) $(this).offset( { left:8, top:160 } );
});
|
Может кому пригодится. | |
| |
|
|
