Поменять z-index при передвижении элемента (draggable)
Приветствую всех!
Делаю шахматы на js. Для перетаскивания фигур, использую библиотеку ui а именно функцию draggable. И проблема заключается в том что при перетаскивании фигуры, она не видна в случае когда мы ее наводим на соседнею фигуру. То есть первая уходит под все остальные, вторая показывается над первой (как мне и нужно), но скрывается под всеми остальными, и т.д. А последняя как и нужно всегда показывается над всеми. Смотрел документацию, пробовал применить:
$(".selector").draggable({ stack:".draggable" });
Пробовал:
$(".selector").draggable({ zIndex:5 });
Пробовал в лоб:
function setDraggable(){
$('.figure').draggable({
start: function() {
$('.figure').css('z-index',2);
$(this).css('z-index',999);
},
stop: function() {
//cod
}
});
}
Но индекс к перетаскиваемой фигуре не применяется. Позиционирование блокам задано, консоль показывает у всех дивов с фигурами z-index: 2, у захваченной фигуры z-index: 2, но она все равно скрывается за фигурами следующими за ней. Подскажите в чем может быть проблема. |
arkadii_parovozov,
сделайте минимальный пример |
arkadii_parovozov,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(window).load(function () {
$('div[id*=element]').draggable({
zIndex: 35
})
});
</script>
</head>
<body>
<div id="element1" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
<div id="element2" class="img"><div class="delete"></div><img src="http://javascript.ru/img/ws_1.png" width="115" height="66" /><div class="resaze"></div></div>
<div id="element3" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
<div id="element4" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="115" height="66" /><div class="resaze"></div></div>
</body>
</html>
|
рони, спасибо большое! Я скопировал из Вашего примера ссылки на библиотеки, вставил js код отсюда (естественно element заменил на свой). Но не работает и все тут.
Ничего не могу понять. Консоль молчит. Вот ссылка на шахматы: chess Там функция вызывается на 104 строке в js файле. И еще, как здесь к карме прибавить можно? Когда жму на + выскакивает: "Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его рони." |
arkadii_parovozov,
вариант расположить фигуры в .table_chass а не в ячейках. |
рони,
но ведь фигура должна быть расположена в конкретном квадрате доски (e2, e4 к примеру). Я не могу их бросить в один контейнер, как потом ходы определять, какая фигура в клетке и т.п.? Не хочется все что есть выбросить и заново писать логику. Может есть другой вариант? |
рони,
Спасибо большое за "наводку". Я прописал z-index клеткам а не фигурам:
function setDraggable(){
$('.figure').draggable({
start: function() {
$('.square').css('z-index',2);
$(this).parent().css('z-index',999);
},
stop: function() {
//cod
}
});
}
на мой взгляд это не правильно конечно, но за неимением лучшего, и так сойдет. |
Ну с перетаскиванием красивее будет. Мог конечно и сам реализовать, но с библиотекой быстрее будет.
На днях наткнулся на статью на хабре в которой говорится об одном мексиканце который реализовал алгоритм игры в шахматы всего в 1Кб. Открыл код, глянул, а там вот это нечто:
for (B = i = y = u = b = i = 5 - 5, x = 10, I = [], l = []; l[B] = "ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK IDHGFE".charCodeAt(B) - 64, B++ < 120; I[B - 1] = B % x ? B / x % x < 2 | B % x < 2 ? 7 : B / x & 4 ? 0 : l[i++] : 7);
function X(c, h, e, s) {
e ^= 8;
for (var o, S, C, A, R, T, G, n, N = -1e8, O = 20; ++O < 99;)
if ((o = I[T = O]) && (G = o ^ e) < 7) {
A = G-- & 2 ? 8 : 4;
C = o - 9 ? l[61 + G] : 49;
do
if (!(R = I[T += l[C]]) && !!G | A < 3 || (R + 1 ^ e) > 9 && G | A > 2) {
if (!(R - 2 & 7)) return 78 - h << x;
n = G | (e ? T > 29 : T < 91) ? o : 6 ^ e;
S = (R && l[R & 7 | 32] - h - G) + (G ? 0 : n - o ? 55 : (A < 2) + 1);
if (c > h || 1 < c & c == h && S > 2) {
I[T] = n;
I[O] = 0;
S -= X(c, h + 1, e, S - N);
if (!(h || c - 1 | B - O | T - b | S < -1e4)) return W(B = 0), e && setTimeout("X(2,0,8),X(1,0,8)", 50);
I[O] = o;
I[T] = R
}
if (S > N || !h & S == N && Math.random() < .5)
if (N = S, c > 1)
if (h ? s - S < 0 : (B = O, b = T, 0)) return S
} while (!R & G > 2 || (T = O, (G || A > 2 | (e ? O > 78 : O < 41) & !R) && ++C * --A))
} return N
}
function W() {
i = "<table>";
for (u = 18; u < 98; i += ++u % x - 9 ? "<th width=60 height=60 onclick='I[b=" + u + "]>8?W(B=b):X(1,0,0)'style='font-size:50px'bgcolor=#" + (u - B ? u * .9 & 1 || 9 : "d") + "0f0e0>&#" + (I[u] ? 9808 + l[67 + I[u]] : 160) + ";" : u++ && "<tr>");
document.body.innerHTML = i + "</table>"
}
W();
ну и сама отрисовка доски (в счет не берем):
(function() {
var doc = document;
var header = doc.getElementsByTagName("header")[0];
var firstChild = header.firstChild;
var p = doc.getElementsByClassName("p")[0];
var n = doc.getElementsByClassName("n")[0];
header.insertBefore(p, firstChild);
header.insertBefore(n, firstChild);
header.appendChild(doc.getElementsByTagName("p")[0])
})();
(function reload() {
var doc = document;
var header = doc.getElementsByTagName("header")[0];
var iframe = doc.createElement("iframe");
doc.body.appendChild(iframe);
var iwin = iframe.contentWindow;
var idoc = iframe.contentDocument;
idoc.open();
idoc.close();
idoc.write('<!doctype html><head><meta charset="utf-8"><body>');
idoc.head.innerHTML = "<style>\n" + "html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; }\n" + "</style>\n";
idoc.body.innerHTML = "\n\t\t" + "<canvas" + ' id="c"' + '' + "></canvas>\n" +
(false ? "<script>\x3c/script>\n" : "") + "";
var Audio = iwin.Audio;
iwin.Audio = function(x) {
return new Audio(x)
};
if (false) {
var canvas = idoc.getElementsByTagName("canvas")[0];
iwin.a = canvas.getContext("2d");
iwin.b = idoc.body;
iwin.c = canvas;
var p2d = iwin.Path2D;
function wrap(ctx) {
var fill = ctx.fill,
clip = ctx.clip,
stroke = ctx.stroke;
ctx.scale = ctx.scale;
ctx.drawFocusIfNeeded = ctx.drawFocusIfNeeded;
ctx.ellipse = ctx.ellipse;
ctx.fill = function(r) {
fill.call(ctx, r === "evenodd" ? "evenodd" : "nonzero")
};
ctx.stroke =
function(p) {
if (p && p2d && p instanceof p2d) stroke.call(ctx, p);
else stroke.call(ctx)
};
ctx.clip = function(p) {
if (p && p2d && p instanceof p2d) clip.call(ctx, p);
else clip.call(ctx)
};
return ctx
}
if (false) {
var cvs = iwin.c;
var cNode = cvs.cloneNode;
cvs.cloneNode = function() {
var clone = cNode.apply(cvs, arguments);
var cloneGet = clone.getContext;
clone.getContext = function() {
return wrap(cloneGet.call(clone, "2d"))
};
return clone
};
var get = cvs.getContext;
cvs.getContext = function() {
return wrap(get.call(cvs, "2d"))
}
}
if (false) wrap(iwin.a)
}
idoc.body.clientWidth;
var demo = idoc.createElement("script");
var scrpt = doc.querySelector('script[type="demo"]').textContent.replace(/m.location=m.location;/, "top.reload();");
if (false) scrpt = "A=0,B=0;" + scrpt;
demo.textContent = scrpt;
idoc.body.appendChild(demo);
idoc.close();
iframe.contentWindow.focus();
var r = doc.createElement("div");
r.innerHTML = "↻";
r.className = "button r";
r.title = "restart just the demo (local, without remote fetch)";
window.reload = r.onclick = function() {
doc.body.removeChild(iframe);
r.parentElement.removeChild(r);
iframe = null;
r = null;
idoc = null;
header = null;
reload()
};
var firstLine = doc.getElementsByTagName("div")[0];
header.insertBefore(r, firstLine)
})();
ну и сама ссылка на игру Может кто-то обьяснить как этот алгоритм устроен? У меня файл приблежается к 1к строк, а я еще не приступал к реализации шаха и мата, а у него 1010 символов и там реализована даже логика игры! То есть он еще и сам ходит, причем не как попало, а с учетом стоимости фигур, позиции, цвета и т.п. Проверяет правильность ходов в обычном режиме, в режиме угрозы королю, превращение пешки в ферзя. В общем я смотрю на эти символы и понять не могу как туда можно зашить такую логику. Просветите пожалуйста ) |
Цитата:
Как такой маленький кусочек кода может просчитывать правильные шаги, и вообще играть в шахматы (пусть даже без рокировки и т.п.). Причем он даже просчитывает возможные шаги при шахе. Я вот только представлю себе как реализовать это, и понимаю что только этот метод у меня будет больше чем у него вся игра. В чем хитрость? Где там вообще прорисовывается логика проверки ходов и генерация валидных ходов программой? |
| Часовой пояс GMT +3, время: 05:29. |