#14694 closed bug (patcheswelcome)

Opened October 09, 2015 01:39PM UTC

Closed October 09, 2015 01:41PM UTC

Last modified September 20, 2017 06:00AM UTC

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>
Attachments (0)
Change History (2)

Changed October 09, 2015 01:41PM UTC by scottgonzalez comment:1

resolution: → patcheswelcome
status: new → closed

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.

Changed September 20, 2017 06:00AM UTC by uunicorn comment:2

Raised pull request: https://github.com/jquery/jquery-ui/pull/1835