Javascript 或者触摸它将触发默认事件。因此，您只需在draggable（）上使用cancel:false即可防止该默认事件的发生_Javascript_Android_Html_Jquery Ui_Drag And Drop

Javascript 或者触摸它将触发默认事件。因此，您只需在draggable（）上使用cancel:false即可防止该默认事件的发生

javascript android html jquery-ui

Javascript 或者触摸它将触发默认事件。因此，您只需在draggable（）上使用cancel:false即可防止该默认事件的发生,javascript,android,html,jquery-ui,drag-and-drop,Javascript,Android,Html,Jquery Ui,Drag And Drop,在使用cancel:false后，这里是代码的工作链接。您正在将其应用于div，请尝试将其应用于div中的任何项目。小提琴在哪里？你如何在排除jquery.ui touch-punch的情况下支持移动设备？只需在上面的代码中添加cancel:false，其余所有remians都一样，因为问题不在于jquery.ui-touch-punch，而在于button Dragable类，因为它稍有不同。你可以为我创建一个提琴吗？我会尝试处理它。是的，但它不适用于弹出。。我有选择源代码按钮，打开sourc

在使用

cancel:false

后，这里是代码的工作链接。您正在将其应用于div，请尝试将其应用于div中的任何项目。小提琴在哪里？你如何在排除jquery.ui touch-punch的情况下支持移动设备？只需在上面的代码中添加cancel:false，其余所有remians都一样，因为问题不在于jquery.ui-touch-punch，而在于button Dragable类，因为它稍有不同。你可以为我创建一个提琴吗？我会尝试处理它。是的，但它不适用于弹出。。我有选择源代码按钮，打开

sourcePopover

。所以，从

sourcePopover

我需要拖动

fav_div

@SandipArmalPatil中的img/按钮，我已经更新了我的答案。查看更新并运行代码片段。感谢您的快速响应：-）现在更新投票答案。但奇怪的是，它在这里仍然不起作用。现在，我收到一条警告

Ignored试图取消一个带有cancelable=false的touchstart事件，例如，因为滚动正在进行且无法中断。

当我们在移动调试模式下打开屏幕时，它在浏览器上工作，但在chrome上不工作。所以可能是触摸打孔不在这里工作？看看这个。这可能对你有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<!--Font Awesome -->


<script src="js/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>            
<script src="js/jquery-ui.min.js"></script> 
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.ui.touch-punch.min.js"></script>


<script type="text/javascript">     
/*Function to show popover when select button click*/
$(function(){   


    // Enables popover #2
    $("#btn_select_source").popover({       
        container: 'body',
        animation:true,
        html : true, 
        content: function() {
        return $("#sourcePopover").html();
        },
        title: function() {
        return $("#sourcePopoverTitle").html();
        }
    })
});

$(function(){   
    $("#sourcePopover button").draggable({
            revert: "invalid",
            refreshPositions: true,
            drag: function (event, ui) {
                ui.helper.addClass("draggable");
            },
            stop: function (event, ui) {
                ui.helper.removeClass("draggable");
                var image = this.src.split("/")[this.src.split("/").length - 1];
                if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                    alert(image + " dropped.");
                }
                else {
                    alert(image + " not dropped.");
                }
            }
        });
        $("#fav_div").droppable({
            drop: function (event, ui) {
                if ($("#fav_div button").length == 0) {
                    $("#fav_div").html("");
                }
                ui.draggable.addClass("dropped");
                $("#fav_div").append(ui.draggable);
            }
        });     
});

</script>
<style type="text/css"> 
    .draggable
    {
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
    .dropped
    {
        position: static !important;
    }

</style>
</head>
<body style="background-color:#080808;" onload="init()">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12  grid-padding-5px margin-top-10px">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 remove-grid-padding" id="fav_div">
  <a data-toggle="popover" data-trigger="focus"  id="a_select_source">
     <button type="button" class="btn btn-secondary" id="btn_select_source" onclick="buttonSourcePressed(this.id)"> Select<br/>Source</button></a>                          
 </div>

 <div id="sourcePopover" class="container">
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 remove-grid-padding margin-2px" >
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_disc" >
            <img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> Disc </span>
        </button>       
        <button class="btn btn-secondary btn-popup-sources center-block" id="source_btn_BT">
            <img src="images/BT.png" class="img-responsive popup-source-image" > <br/>
            <span class="popup-source-text"> Bluetooth </span>
        </button>
     </div>
   </div>
 </div>
</body>
</html>

<script src="file:///android_asset/jquery/jquery.ui.touch-punch.min.js" type="text/javascript"></script>

$(function () {
    $("#dvSource button").draggable({
        cancel :false,
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


</head>
<body>
<div>
<style type="text/css">
body
{
    font-family: Arial;
    font-size: 10pt;
}
img
{
    height: 100px;
    width: 100px;
    margin: 2px;
}
.draggable
{
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.dropped
{
    position: static !important;
}
#dvSource, #dvDest
{
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 100px;
    width: 430px;
}
</style>


<script type="text/javascript">
$(function () {
    $("#dvSource button").draggable({
        cancel :false,
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },
        stop: function (event, ui) {
            ui.helper.removeClass("draggable");
            /*var image = this.src.split("/")[this.src.split("/").length - 1];*/
            /*if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                alert(image + " dropped.");
            }
            else {
                alert(image + " not dropped.");
            }*/
        }
    });
    $("#dvDest").droppable({
        drop: function (event, ui) {
            if ($("#dvDest button").length == 0) {
                $("#dvDest").html("");
            }
            ui.draggable.addClass("dropped");
            $("#dvDest").append(ui.draggable);
        }
    });
});
</script>
<div id="dvSource">

<a data-toggle="popover"   id="a_select_source">

        <button type="button" class="btn btn-secondary" id="btn_select_source">Select<br/>Source</button>

        </a>

</div>
<hr />
<div id="dvDest" >
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_disc" >
            <img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> Disc </span>
        </button>
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_disc" >
            <img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> Disc </span>
        </button>
        <button class="btn btn-secondary  btn-popup-sources center-block" id="source_btn_disc" >
            <img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> Disc </span>
        </button>
    </div>
    </div>
    </body>
    </html>

/*  var image = this.src.split("/")[this.src.split("/").length - 1];
                if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                    alert(image + " dropped.");
                }
                else {
                    alert(image + " not dropped.");
                } */