Can you assist me with a task? I have two text boxes with an equal sign image, and I want the user to be able to move the div only when hovering over the equal sign.
This means that the user should be able to drag the div using the equal sign. Can you help me achieve this?
$( 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>