Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2019, 18:33
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

Поменять 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, но она все равно скрывается за фигурами следующими за ней.

Подскажите в чем может быть проблема.
Ответить с цитированием
  #2 (permalink)  
Старый 24.09.2019, 19:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

arkadii_parovozov,
сделайте минимальный пример
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2019, 19:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2019, 19:42
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

рони, спасибо большое! Я скопировал из Вашего примера ссылки на библиотеки, вставил js код отсюда (естественно element заменил на свой). Но не работает и все тут.

Ничего не могу понять. Консоль молчит.

Вот ссылка на шахматы: chess

Там функция вызывается на 104 строке в js файле.


И еще, как здесь к карме прибавить можно? Когда жму на + выскакивает: "Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его рони."
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2019, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

arkadii_parovozov,
вариант расположить фигуры в .table_chass а не в ячейках.
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2019, 21:20
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

рони,
но ведь фигура должна быть расположена в конкретном квадрате доски (e2, e4 к примеру). Я не могу их бросить в один контейнер, как потом ходы определять, какая фигура в клетке и т.п.?

Не хочется все что есть выбросить и заново писать логику. Может есть другой вариант?
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2019, 21:39
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

рони,
Спасибо большое за "наводку". Я прописал z-index клеткам а не фигурам:
function setDraggable(){
	$('.figure').draggable({
		start: function() {
			$('.square').css('z-index',2);
			$(this).parent().css('z-index',999);
        },
        stop: function() {
			//cod
        }
	});
}


на мой взгляд это не правильно конечно, но за неимением лучшего, и так сойдет.
Ответить с цитированием
  #8 (permalink)  
Старый 25.09.2019, 13:00
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

Ну с перетаскиванием красивее будет. Мог конечно и сам реализовать, но с библиотекой быстрее будет.

На днях наткнулся на статью на хабре в которой говорится об одном мексиканце который реализовал алгоритм игры в шахматы всего в 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 = "&#8635;";
    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 символов и там реализована даже логика игры! То есть он еще и сам ходит, причем не как попало, а с учетом стоимости фигур, позиции, цвета и т.п. Проверяет правильность ходов в обычном режиме, в режиме угрозы королю, превращение пешки в ферзя. В общем я смотрю на эти символы и понять не могу как туда можно зашить такую логику.

Просветите пожалуйста )
Ответить с цитированием
  #9 (permalink)  
Старый 25.09.2019, 17:50
Кандидат Javascript-наук
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 101

Сообщение от Rise Посмотреть сообщение
это что не реализовано
ну там много чего еще не реализовано, то же взятие пешки на проходе, повтор позиции и т.д. Но речь не об этом. Речь об алгоритме который реализован и представлен в виде кода из 1018 символов. Да плюс еще, оказывается, он умудрился туда и отрисовку доски запихнуть.

Как такой маленький кусочек кода может просчитывать правильные шаги, и вообще играть в шахматы (пусть даже без рокировки и т.п.). Причем он даже просчитывает возможные шаги при шахе. Я вот только представлю себе как реализовать это, и понимаю что только этот метод у меня будет больше чем у него вся игра.

В чем хитрость? Где там вообще прорисовывается логика проверки ходов и генерация валидных ходов программой?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необъяснимое поведение прокрутки при использовании homekey demoniqus Events/DOM/Window 2 26.08.2019 10:05
Смена текста одного элемента при наведении на другой Daillyn jQuery 3 24.01.2019 07:52
focusout приходит при активациия элемента (type=number) ValeryBush Firefox/Mozilla 0 17.07.2015 14:43
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14
Как поменять местами элементы в дереве элемента родителя? rar11 Events/DOM/Window 8 01.04.2009 18:53