Opened 4 years ago

Closed 4 years ago

Last modified 2 years ago

#14694 closed bug (patcheswelcome)

snap gets offset when container is scrolled during drag

Reported by: T.J. Crowder Owned by:
Priority: minor Milestone: none
Component: ui.draggable Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:

Description

If you have an element snapping to other elements, and you drag the element such that the container scrolls, the element snapping ends up being offset from the other elements.

Replicated in this fiddle (full source below): http://jsfiddle.net/sdk0kgay/

Steps:

  1. Run the page
  2. Drag the element without going near the edges -- snaps fine
  3. Drag down so that the container scrolls -- snapping gets off

(may take a couple of attempts)

Full source for replication:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style>
html {
    box-sizing: border-box;
}
*, *:after, *:before {
    box-sizing: inherit;
}
.wrapper {
    position: relative;
    height: 200px;
    max-height: 200px;
    min-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.data {
    width: 100%;
    border-collapse: collapse;
}
.data, .data td, .data th {
    border: 1px solid #ddd;
}
.cell {
    position: relative;
    width: 12.5%;
    height: 22px;
}
.dragme {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 50%;
    height: 22px;
    border: 1px solid red;
    background-color: #ee8;
    z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
    <table class="data">
        <tbody></tbody>
    </table>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
(function() {
    var cells = $('<td class="cell"></td>');
    while (cells.length < 8) {
        cells = cells.add(cells.clone());
    }
    var rows = $();
    while (rows.length < 50) {
        rows = rows.add($("<tr>").append(cells.clone()));
    }
    $(".data tbody").append(rows);
    $("<div>").addClass("dragme")
        .appendTo(
            rows.eq(1).find(".cell:first")
        )
        .draggable({
            containment: ".data",
            snap: ".cell"
        });
})();
</script>
</body>
</html>

Change History (2)

comment:1 Changed 4 years ago by Scott González

Resolution: patcheswelcome
Status: newclosed

Snapping is being removed during the rewrite, so the team is unlikely to spend time on this bug. However, we can review patches if someone wants to send a pull request.

Note: See TracTickets for help on using tickets.