Блог

Я использую Gridstack для перетаскиваемых элементов div. Как мне получить новое значение data-gs-y (таким образом, по какой оси y был удален div). На самом деле я пробовал это:

 <div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
                    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="1" data-gs-id="facebook">
                        <div class="grid-stack-item-content">facebook</div>
                    </div>
                    <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="12" data-gs-height="1" data-gs-id="workbook">
                        <div class="grid-stack-item-content">workbook</div>
                    </div>
                    <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="12" data-gs-height="1" data-gs-id="pictures">
                        <div class="grid-stack-item-content">pictures</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('.grid-stack').gridstack({
            disableResize: true,
            removable: true
        });
    });

    $('.grid-stack').on('dragstop', function(event, ui) {
            var element = event.target;
            var id = $(element).attr('data-gs-id');
            var y = $(element).attr('data-gs-y');
            alert(id   y);
        });

    $('.grid-stack').on('dropped', function (event, previousWidget, newWidget) {
        alert('dropped'); // It's not thrown
    });

    $('.grid-stack').on('change', function(event, items) {
        var element = items[0].el[0];
        var id = $(element).attr('data-gs-id');
        var y = $(element).attr('data-gs-y');
        alert(id   y);
    });
</script>
  

Таким образом, при перетаскивании события, а также при изменении мне присваивается текущее / старое значение оси y, и удаленное событие не генерируется..

Как мне получить новое значение оси y?

Я думаю, вы можете использовать «mutation observer» для прослушивания изменений атрибута ‘data-gs-y’ для каждого элемента div. Я написал следующий код и проверил его на этой демонстрации http://gridstackjs.com/demo/knockout.html

 var divs = document.querySelectorAll(".grid-stack-item");
var dragging = false;
divs.forEach(function(div){
 const observer = new MutationObserver((mutations) => { 
   mutations.forEach((mutation) => {
     if(!dragging){
       alert("new y-value "   div.getAttribute("data-gs-y"));
     }
   });
 });
observer.observe(div, { attributes: true, attributeFilter: ['data-gs-y'] });

div.onmousedown = function(){ dragging = true;}
div.onmouseup = function(){ dragging = false;}   
});