1
 $('.sossage')
        .mousedown(function (e) {
            offsetx = e.offsetX;
            var elWidth = parseInt($(this).css('width'));
            if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) {
                resizeState = true;
                clientXforResize = e.clientX;
                initialWidth = parseInt($(this).css('width'));
            }
        })
        .mouseup(function (e) {
            resizeState = false;
            var elWidth = parseInt($(this).css('width'));
            if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) {
                resizeState = false;
            }
        });

    $(document)
        .mousemove(function (e) {
            if (resizeState == true) {
                var widthOffset = clientXforResize - e.clientX;
                $('.sossage').css({
                    'width': (initialWidth - widthOffset) + 'px'
                });
            }
        })
        .mouseup(function () {
            resizeState = false;
        });
4
  • 'var that = this' в том контесте исполнения который хотите перенести в функцию и 'this = that' в самой функции, чтобы контекст её исполнения был темже как и у "родителя". Если не очень понятно- отпиши- попробую нормальный пост накатать
    – Den
    15 окт 2015 в 10:29
  • @Den честно говоря не очень
    – Baga
    15 окт 2015 в 10:49
  • В строках var elWidth = parseInt($(this).css('width')); this указывает именно на кликнутый елемент. А елементов с классом sossage много. Моя проблема именно в том, чтобы работать с каждым отдельным елементом.
    – Baga
    15 окт 2015 в 11:22
  • если выведеш в консоль после этой строки 'this' то получиш 1 div
    – Den
    15 окт 2015 в 11:28

1 ответ 1

1

mousemove работает со всеми элементами массива, а нужен только 1. Только проблема в том что как только курсор выходит за див скрипт багается т.к. e.target уже не див. Чуть переделал.

var resizeState = false; 
var my_target;

$('.sossage')
        .mousedown(function (e) {
            offsetx = e.offsetX;
            var elWidth = parseInt($(this).css('width'));
            if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) {
                my_target = e.target;
                resizeState = true;
                clientXforResize = e.clientX;
                initialWidth = parseInt($(this).css('width'));
            }
        })
        .mouseup(function (e) {
            resizeState = false;
            var elWidth = parseInt($(this).css('width'));
            if (e.offsetX >= elWidth - 5 && e.offsetX <= elWidth) {
                resizeState = false;
                my_target = null;
            }
        });

    $(document)
        .mousemove(function (e) {
            if (resizeState == true) {
                var widthOffset = clientXforResize - e.clientX;
                $(my_target).css({
                    'width': (initialWidth - widthOffset) + 'px'
                });
            }
        })
        .mouseup(function () {
            resizeState = false;
        });
.sossage {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin: 50px;
  border: 5px solid black;
  background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sossage"></div>
<div class="sossage"></div>
<div class="sossage"></div>
<div class="sossage"></div>
<div class="sossage"></div>
<div class="sossage"></div>

9
  • Да, и ломает всю страницу)
    – Baga
    15 окт 2015 в 11:36
  • переделал, проверь сейчас
    – Den
    15 окт 2015 в 11:38
  • Я окнончательно запутался. Теперь ресайз вообще не работает и в консоли пусто.
    – Baga
    15 окт 2015 в 11:40
  • Работает. Но так как и прежде. Таскаются все дивы одновременно.
    – Baga
    15 окт 2015 в 11:43
  • Проблема в другом. Я понял. Елементы друг друга толкают...
    – Baga
    15 окт 2015 в 11:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.