定义和用法

只有当光标在draggable上指定部分时才允许拖拽。使用handle选项来指定用于拖拽对象的元素（或元素组）的jQuery选择器或者当光标在draggable内指定元素（或元素组）上时不允许拖拽。使用cancel选项来指定取消拖拽功能的jQuery选择器


示例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>jQueryUI拖动（Draggable）-Handles和Cancel</title><linkrel="stylesheet"href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css"><style>#draggable1,#draggable2{width:200px;height:200px;padding:0.5em;float:left;margin:010px10px0;}#draggablep{cursor:move;}</style></head><body><divid="draggable1"class="ui-widget-content"><pclass="ui-widget-header">您只可以在这个范围内拖拽我</p></div><divid="draggable2"class="ui-widget-content"><p>您可以把我向四周拖拽</p><pclass="ui-widget-header">但是您不可以在这个范围内拖拽我</p></div><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js"type="text/javascript"></script><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script><script>$(function(){$("#draggable1").draggable({handle:"p"});$("#draggable2").draggable({cancel:"p.ui-widget-header"});});</script></body></html>


输出