Jquery draggable jumps on click in Chrome

Question

I have an issue with jQuery draggable. I have two images in a div with a background image. I can click and drag OK in Firefox but in Chrome they both jump to the top left of the div. If you click and drag again it works OK.

<!doctype html>
<html>
<head>
<title>Untitled Document</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<link href="css/styles-test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="plot_graph"> <img src="http://petentest.co.uk/images/plotgraph-v3.png" width="100%">
  <div class="drag_container"> <i style="left:51.32211538461539%;top:40.056022408963585%; color: #00C; cursor: move;"  class="pennant-blue fa-5x draggable"> <img src="http://petentest.co.uk/images/pp-blue-pennant-2x.png" width="32" /></i> <i style="left:51.32211538461539%;top:40.056022408963585%; color:#00FFFF; cursor: move;" class="pennant-red fa-5x draggable-manager" > <img src="http://petentest.co.uk/images/pp-red-pennant-2x.png" width="32" /> </i> </div>
</div>
<script>
    $( ".draggable" ).draggable({
    containment: ".drag_container",
    stop: function() {
    var plotX = $(this).position().left / $(this).parent().width() * 100;
    var plotY = $(this).position().top / $(this).parent().height() * 100;
    $('.plot_x').val(plotX);
    $('.plot_y').val(plotY);
    var java_id = $("input[name=java_id]").val();
    //var ajaxurl = 'http://petentest.co.uk/includes/send_user_plot_data.php',
    data =  {
    'performance_plan_id' : java_id,
    'user_plot_x': plotX,
    'user_plot_y': plotY };
    $.post(ajaxurl, data, function (response) {
    console.log("Plot saved successfully.");
    alert('Your position was saved successfully.');
    });
    }
    });
</script> 
<script>
$( ".draggable-manager").draggable({
    containment: ".drag_container",
    stop: function() {
        var plotX = $(this).position().left / $(this).parent().width() * 100;
        var plotY = $(this).position().top / $(this).parent().height() * 100;
    $('.plot_x').val(plotX);
    $('.plot_y').val(plotY);
    var java_id = $("input[name=java_id]").val();
    var ajaxurl = 'http://petentest.co.uk/includes/send_manager_plot_data.php',
    data =  {
    'performance_plan_id' : java_id,
    'manager_plot_x': plotX,
    'manager_plot_y': plotY };

            $.post(ajaxurl, data, function (response) {
        console.log("Plot saved successfully.");
        alert('You cannnot move your manager\'s assessment.');
        });

    }
    });
    </script>
</body>
</html>

JSFiddle: https://jsfiddle.net/petenaylor/sk75rpuh/

Answer 1

I was able to get it to work by adding "position: absolute" into the styling for your pennant-blue icon.

.pennant-blue {
     position: absolute;
}

Jquery draggable jumps on click in Chrome

Question

1 answers

solution1
0 2015-11-11 16:57:08

Jquery draggable jumps on click in Chrome

Question

1 answers

solution1 0 2015-11-11 16:57:08

solution1
0 2015-11-11 16:57:08