禁用特定div的可拖动功能

时间:2014-03-27 07:31:15

标签: javascript jquery html css

crop_popup_box

<div id="crop_box" class="popup_box crop_popup">
<span class="popup-title" id="popup_title">Crop Image</span>    
<div id="crop_div" style="display:none;">
    <div style="margin-left:60px;" class="example">
        <div class="default">
            <div  class="cropMain"><div class="crop-container" style="width: 320px; height: 320px;"><div class="crop-overlay" style="z-index: 6000; top: 0px; left: 0px;"></div><img class="crop-img" src="./jQuery & Canvas Image Cropper_files/one.jpg" style="z-index: 5999; top: -149.8px; left: -622.6650049850448px; width: 1402.7676969092722px; height: 549.6px;"></div></div>

            <div class="cropSlider horizontal"><a style="left: 43%; z-index: 1;"><div class=""></div></a><input type="hidden" name="" value="2.29"></div>

        </div>
       </div>
</div>
</div>

的script.js

 $(function() {
        $( ".popup_box" ).draggable();         
  });

我已将draggable属性应用于此裁剪弹出窗口。我可以拖动整个弹出窗口。是否可以限制div中类cropSlider horizontal的可拖动功能。如果使用单击div cropSlider horizontal并拖动弹出窗口不应该拖动,因为我在该div中使用缩放栏。使用缩放栏弹出窗口拖动而无法缩放图像。

我试过了,

$('div.cropSlider').draggable( "disable" )

它没有用。需要帮助

3 个答案:

答案 0 :(得分:1)

您也可以稍后在需要时停用:

$('div.cropSlider').draggable();  
$('div.cropSlider').draggable( "option", "disabled", true );

答案 1 :(得分:0)

尝试使用:

$('.popup_box div.cropSlider').draggable({disabled: true});

答案 2 :(得分:0)

使用:

$(".popup_box").children('.cropSlider').draggable({disabled:true});