如何覆盖jQuery-ui-sortable的拖动事件

How can I override the drag event for jQuery ui sortable?

本文关键字:jQuery-ui-sortable 拖动 事件 覆盖 何覆盖      更新时间:2024-04-19

在jQuery UI站点上,它说"默认情况下,可排序项目共享可拖动属性。"我认为这意味着可拖动的、可排序的所有事件也应该继承。然而,情况似乎并非如此。对于可排序的网格,我需要类似draggable中的"拖动"事件,这样我就可以手动更新正在拖动的元素的x和y值。到目前为止,我已经能够使用mousemove事件和一些标志获得拖动元素的X和Y值,但我无法获得它,因此可以设置X和Y的值。当我尝试设置这些值时,它们只会在下次触发事件时重置(可能发生在mousemove事件之后)。有人知道如何做到这一点吗?

这是我迄今为止所尝试的小提琴:http://jsfiddle.net/turtlewaxer1100/CUXxn/5/

HTML

<div class="row grid span8">
    <div class="well span2 tile">A</div>
    <div class="well span2 tile">B</div>
    <div class="well span2 tile">C</div>
    <div class="well span4 tile">D</div>
</div>

CSS

.placeholder {
    border: 1px solid green;
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
    height: 100px;
    width: 100px;
}
.grid {
    margin-top: 1em;
}

JS

var dragging = false;
$(function () {
    $(".grid").sortable({
        start: dragging = function(e, ui) {
          return dragging = true;
        },
        stop: dragging = function(e, ui) {
          return dragging = false;
        },
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true,
        // Drag doesn't work as an event in sortable.
        drag: function() 
        {
            console.log("Drag fired!");
        }
    });
    // My attempt at a custom drag event. (can get values, but can't set them.)
    $(document).mousemove(function(e){
        if(dragging===true)
        {
            // Grab the sortable element being moved. 
            element = $(".ui-sortable-helper");
            // Show the current X and Y values. (get reset after manually setting them below)
            console.log("before: X: " + element.css("left") + ", Y: " + element.css("top"));   
            // Change the X and Y values to something arbitrary.
            element.css("left",0);
            element.css("top",0);
            // Show the X and Y values after the change. 
            console.log("after: X: " + element.css("left") + ", Y: " + element.css("top")); 
        }
    });
});

尝试sortable的sort事件。

 sort: function(event, ui) 
        {
            console.log("Drag fired!");
            ui.helper.css("left",0);
            ui.helper.css("top",0);
        }

这是您更新的jsfiddle