| |
|
|
| | Здравствуйте!
Хотелось бы узнать - возможно ли на "чистом" javascript реализовать перетаскивание объекта мышкой, т.е. drag&drop? Кто-то из участников форума уже делал такое? Это в принципе реально только одними лишь средствами JS? | |
| |
|
|
| |
|
|
| |
для: vtos
(10.04.2010 в 17:27)
| | | а что значит на "чистом" javascript? библиотеки по вашему на грязном пишут? :)
канечно возможно, я например вообще не юзаю всяких jquery, prototype и т. д. | |
| |
|
|
| |
|
|
| |
для: Lelik
(10.04.2010 в 18:08)
| | | На "чистом" - я имел в виду как раз таки без использования библиотек :) И без каких-то дополнительных "фишек"... | |
| |
|
|
| |
|
|
| |
для: vtos
(10.04.2010 в 19:33)
| | | а что значит "фишек"
ответ на основной вопрос: можно | |
| |
|
|
| |
|
|
| |
для: Lelik
(10.04.2010 в 20:09)
| | | "Фишки" - то есть какое-то дополнительное программное обеспечение, какие-то plug-ins, которые дописываются для браузера, чтобы реализовать перетаскивание объектов на странице... Ну, так мне это представлялось, поскольку не разбирался я пока в этом вопросе. А теперь, судя по вашему ответу, все это на самом деле делается на javascript. Хорошая новость! Теперь буду искать материал по нужным объектам, методам, атрибутам и прочему... Спасибо за ответ! | |
| |
|
|
|
| |
|
|
| |
для: mihdan
(10.04.2010 в 23:33)
| | | http://www.softtime.ru/javascript/dragndrop.php
http://fastcoder.org/articles/?aid=149
будет работать не во всех браузерах! | |
| |
|
|
|
| |
|
|
| |
для: АЯ
(11.04.2010 в 02:05)
| | | Ребят, спасибо за ссылки! Но я буду пробовать сам. Меня только интересовало, реально ли это в принципе... Всем спасибо за ответы! | |
| |
|
|
| |
|
|
| |
для: vtos
(10.04.2010 в 17:27)
| | |
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=win-1251">
<script>
var qwe, box, deltaX, deltaY;
function windowLoaded (evt)
{
document.body.ondrag = function () {return false}
document.body.onselectstart = function () {return false}
document.body.oncontextmenu = function () {return false}
}
function getX (obj) {return parseInt (obj.style.left)}
function getY (obj) {return parseInt (obj.style.top)}
function Evt (evt)
{
this.evt = evt ? evt : window.event;
this.source = evt.target ? evt.target : evt.srcElement;
this.x = evt.pageX ? evt.pageX : evt.clientX;
this.y = evt.pageY ? evt.pageY : evt.clientY;
}
Evt.addEventListener = function (target, type, func, bubbles)
{
if (document.addEventListener) target.addEventListener (type, func, bubbles);
else if (document.attachEvent) target.attachEvent ('on' + type, func, bubbles);
else target ['on' + type] = func;
}
Evt.removeEventListener = function (target, type, func, bubbles)
{
if (document.removeEventListener) target.removeEventListener (type, func, bubbles);
else if (document.detachEvent) target.detachEvent ('on' + type, func, bubbles);
else target ['on' + type] = null;
}
function dragPress (evt)
{
evt = new Evt (evt); box = evt.source; box.style.zIndex = 100;
deltaX = evt.x - getX (box); deltaY = evt.y - getY (box);
Evt.addEventListener (document, 'mousemove', dragMove, false);
Evt.addEventListener (document, 'mouseup', dragRelease, false);
}
function dragMove (evt)
{
evt = new Evt (evt);
with (box.style) {left = evt.x - deltaX + 'px'; top = evt.y - deltaY + 'px'}
if (evt.stopPropagation) {evt.stopPropagation (); evt.preventDefault ()}
else if (evt.cancelBubble) {evt.cancelBubble = true; evt.returnValue = false}
}
function dragRelease (evt)
{
evt = new Evt (evt);
Evt.removeEventListener (document, 'mousemove', dragMove, false);
Evt.removeEventListener (document, 'mouseup', dragRelease, false);
box = evt.source; box.style.zIndex = 10;
}
var sort2 = new Function ('w', 'z', "return ((w.split ('~') [1]) * 1 - (z.split ('~') [1]) * 1)");
onload = function ()
{
var x = "dE;3a 'ятяв',, ,, a'еи етз ыьаикМ(tr|c:xmel|=3a eTckf|b: sEa: eTb";
x += "af|),,(laR;',, ли тдв'neiWngB;xmkcbarV;_a agrPormmx3|a ,,,,a3|ei|rtl";
x += "(Веиечсоаbc)|ednabc;I >|hnk=|lek=;I >|hnmx:kEs a3=;Wie'асмлнми рхчсл";
x += ",,','b','c ялес ,mx)|n";
for (var a = '', b = x.length / 2, c = 0, d = 1, e = x.split (a);
c < b * 1e3; c++, d *=-1) a += e [b += c * d];
for (var y = a.split ('|'), j = 0; j < y.length; j++)
y [j] = 's' + Math.ceil (Math.random () * 1e7) + '~' + j + '~' + y [j];
qwe = y.sort ();
DV = document.getElementById ('firstDV').cloneNode (0);
var t = y [0].split ('~');
var q = DV.cloneNode (0);
q.id = t [0];
q.innerHTML = t [2];
document.body.appendChild (q);
setTimeout (f1, 10);
}
function f1 ()
{
var h = document.getElementById (qwe [0].split ('~') [0]).offsetHeight;
for (var j = 1; j < qwe.length; j++)
{
var t = qwe [j].split ('~');
var q = DV.cloneNode (0);
q.id = t [0]; q.innerHTML = t [2]; q.style.top = (120 + (h + 8) * j) + 'px';
document.body.appendChild (q);
}
setTimeout (f2, 10);
}
function f2 ()
{
document.body.removeChild (document.getElementById ('firstDV'));
for (var j = 0; j < qwe.length; j++)
{
var obj = document.getElementById (qwe [j].split ('~') [0]);
if (document.addEventListener) obj.addEventListener ('mousedown', dragPress, false);
else if (document.attachEvent) obj.attachEvent ('onmousedown', dragPress, false);
else obj ['onmousedown'] = dragPress;
}
windowLoaded ();
}
function f3 ()
{
for (var ewq = new Array (), obj = document.body.getElementsByTagName ('div'), j = 0; j < obj.length; j++)
{
ewq [j] = obj [j].id + '~'; var tabs = 0; var wobj = obj [j];
while (wobj) {tabs += wobj.offsetTop; wobj = wobj.offsetParent}
ewq [j] += tabs;
}
qwe.sort (sort2); ewq.sort (sort2);
for (var j = 0, k = 'Правильно!'; j < qwe.length; j++)
if (qwe [j].split ('~') [0] != ewq [j].split ('~') [0]) k = 'Неверно!';
alert (k);
return false;
}
</script>
</head>
<body>
<center>
<h2>Расставьте строки программы сверху вниз по порядку</h2>
По окончании расстановки нажмите
<a href="javascript:" onclick="return f3 ()">сюда</a>
для проверки правильности</center>
<div id="firstDV" style="position : absolute;
left : 20px;
top : 120px;
background-color: #eee;
color : #333;
z-index : 10;
padding-left : 10px;
width : 600px;
cursor : default;
border : 1px solid silver"></div>
</body>
</html>
|
Это лучшее что я находил. Тащится на УРА :-)) | |
| |
|
|
| |
|
|
| |
для: AlexShag
(12.04.2010 в 13:07)
| | | Спасибо! | |
| |
|
|
