Сегодня я немного счастлив. В блоге CSDN более 10 000 просмотров. У меня никогда не было такого большого количества просмотров в прошлом. Я должен сказать, что я все еще немного претенциозен, но я все еще не могу не быть счастливым, когда вижу эту поддержку. По крайней мере, это заставляет меня чувствовать себя человеком в отрасли. Я не одинок.
Без лишних слов, продолжайте сегодняшнюю запись, запишите следы переигрывания и проанализируйте их из процесса:
1. Чтобы воспроизвести следы перетаскивания, вы должны сначала записать их;
2. Чтобы записать следы перетаскивания, должно быть реализовано перетаскивание;
Эта проблема была решена несколько дней назад, и в то время она была немного ошибочна, но общий метод реализации был ясен, поэтому сегодня я понял эту проблему намного быстрее. Я был очень счастлив. После того, как я снова осознал это сегодня, я понял это немного глубже, поэтому я запишу его сегодня;
Что касается записи трасс перетаскивания, этот анализ будет коротким, в конце концов, я сделал это один раз:
1. Определите текущую позицию и статус DIV, чтобы убедиться, что Absolute может использоваться для перетаскивания;
2. Слушайте события перетаскивания мыши (вчера суммировано несколько событий мыши);
3. Сделайте соответствующий ответ на основе соответствующего события мыши и запишите точки, в которых DIV существует в перетаскивании и падении в OnmouseMove;
4. Слушайте событие Bounce Bounce, чтобы закончить событие Drag и Point Record
В любом случае, давайте сначала внедрим следующий код (все коды перечислены здесь одновременно и проанализированы один за другим):
HTML Language:
<div id = "showzone"> </div> // Это все еще так знакомо <a href = "#" style = "Положение: абсолют; Margin-top: 100px; цвет: желтый; фоновый цвет: red;"> reback </a> // Это разыгрывается взад и вперед
JavaScript Part:
window.onload = function () {var obj = document.getElementbyId ("showzone"); var disx = disy = 0; var dragif = false; var position = [{x: obj.offsetleft, y: obj.offsettop}]; // Это ключ к реализации записи и воспроизведения, а другие получают основные элементы var oa = document.getelementsbytagname ("a") [0]; obj.onmousedown = function (event) {var event = event || window.event; disx = event.clientx-obj.offsetleft; // Расстояние мыши до границы Div = event.clienty-obj.offsettop; dragif = true; // position.push.push ({x: obj.offsetleft, y: obj.offsettop}); // Запись начинается с этого времени вернуть false; }; document.onmousemove = function (event) {if (! Dragif) return; // Это суждение чрезвычайно важно, только нажатое движение может быть допустимым var event = event || window.event; var nowx = event.clientx-disx; // Согласно расстоянию мыши, записанной выше, до DIV, вы можете узнать расстояние div на веб-страницу var nowy = event.clienty-disy; var maxx = document.documentelement.clientwidth-obj.offsetwidth; // Это OffsetWidth, которая является шириной div, а не offsetleft var maxy = document.documentelement.clientheight-obj.offsetheight; nowx = nowx <0? 0: nowx; // Эти суждения просто для того, чтобы судить, что нет границы теперь = nowy <0? 0: nowy; Теперь X = теперь XXX? MAXX: NOWX; nowy = nowy> maxy? Maxy: Nowy; obj.style.margintop = obj.style.marginleft = 0; obj.style.left = nowx+"px"; // не забывайте+"px", только style.left/top obj.style.style.top = nowy+"px" с "px"; position.push ({x: owyx, y: owy}); // obj.innerhtml = "x:"+ownx+"y:"+nowy; // см. Изменения интуитивно возвращают false; }; document.onmouseup = function () {dragif = false; // перетаскивать и записать obj.innerhtml = "x:"+obj.offsetleft+"y:"+obj.offsettop; }; oa.onclick = function () {if (position.length == 1) return; // Когда есть только один, это означает, что таймер var не перемещается. = setInterval (function () {var opos = position.pop (); opos? (obj.style.left = opos.x + "px", obj.style.top = opos.y + "px"): clearinterval (timer); // другое удивленное это написание}, 30); вернуть ложь; }; };Несколько ключевых моментов, чтобы обратить внимание на:
1. Массив позиций var, набор точек: эта точка является точкой движения в верхнем левом углу DIV, то есть траектория движения, которую мы записываем, на самом деле является набором точек в верхнем левом углу DIV, OffSetleft является координатой x, OffSetTop является координатой Y, вы знаете, как нарисовать эту координату оси;
2. Несколько длины или расстояний, появляющихся в программе: Offsetleft, ClientX, OffsetWidth, style.left, document.documentelement.clientWidth и т. Д.;
3. push () Метод: добавьте элементы в конце массива, измените длину массива и конец;
4. Pop () Метод: удалить и вернуть последний элемент массива. Есть два ключевых момента, один: вернуть последний элемент; Другой: удалить элемент, и длина массива становится меньше;
Таким образом, мы осознали обратное воспроизведение, поэтому нет необходимости упоминать принцип реализации. Если у нас есть прямое воспроизведение, мы должны получить и удалить первое значение массива? Ха -ха, попробуйте написать и прочитать это.
Я должен сказать, что более удобно тащить с мышью. Слишком неудобно перемещать клавиатуру. Вы можете перетаскивать и тащить с помощью мыши без раздела ... небо уже в оцепенении, и оно будет горячим, но сегодня все в порядке ...