jQuery在Chrome中点击可拖动跳转

Question

我对jQuery Draggable有问题。 我在具有背景图像的div中有两个图像。 我可以在Firefox中单击并拖动“确定”，但在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>

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

Answer 1

我可以通过在您的三角旗蓝色图标的样式中添加“ position：absolute”来使其工作。

.pennant-blue {
     position: absolute;
}

jQuery在Chrome中点击可拖动跳转

问题描述

1 个解决方案

解决方案1
0 2015-11-11 16:57:08

jQuery在Chrome中点击可拖动跳转

问题描述

1 个解决方案

解决方案1 0 2015-11-11 16:57:08

解决方案1
0 2015-11-11 16:57:08