使用jQuery sortable将鼠标悬停在子图像上时如何移动父div？

Question

I have two text box with an equalsign image. I need when the user hovers over equalsing image then he can move the div otherwise he can't move it.

I mean the user can move the div with the help of equal sign. Would you help me?

 $( function() { $( "#sortable1" ).sortable({}); $( "#sortable1" ).disableSelection(); } ); 

 .border-bg{ border: 1px solid #333; background-color: #f8f8f8; width: 250px; } #sortable1 img, #sortable2 img{ width: 25px; height: 25px; vertical-align: middle; cursor:move; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="sortable1"> <div class="border-bg" > <div class="" > <img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Mathematic%20Equal%20sign2.ico"> <label>name</label> <input type="text" name="name" placeholder="name"> </div> </div> <div class="border-bg"> <div class="" > <img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Mathematic%20Equal%20sign2.ico"> <label>Email</label> <input type="email" name="email" placeholder="email"> </div> </div> </div> 

Answer 1

you can pass handle option for sortable with selector to be used like below or use some class name for images and use it.

$( "#sortable1" ).sortable({
         handle: "img"
    });