Javascript 在Chrome中单击Jquery可拖动跳转_Javascript_Jquery_Jquery Ui_Jquery Ui Draggable_Jquery Draggable

Javascript 在Chrome中单击Jquery可拖动跳转

javascript jquery jquery-ui

Javascript 在Chrome中单击Jquery可拖动跳转,javascript,jquery,jquery-ui,jquery-ui-draggable,jquery-draggable,Javascript,Jquery,Jquery Ui,Jquery Ui Draggable,Jquery Draggable,我对jQuery draggable有一个问题。我在一个div中有两个图像和一个背景图像。我可以在Firefox中点击并拖动OK，但在Chrome中，它们都会跳到div的左上角。如果你再次点击并拖动，效果会很好 <!doctype html> <html> <head> <title>Untitled Document</title> <script src="js/jquery-1.11.1.min.js"></sc

我对jQuery draggable有一个问题。我在一个div中有两个图像和一个背景图像。我可以在Firefox中点击并拖动OK，但在Chrome中，它们都会跳到div的左上角。如果你再次点击并拖动，效果会很好

<!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>

jsiddle:

我可以通过在您的蓝色旗帜图标的样式中添加position:absolute使其正常工作

.pennant-blue {
     position: absolute;
}