Move a div with a small square-CodePudding

I want a draggable div. I have a solution, and it works, but i want to drag the div ONLY with a small square

.bat {
    position: absolute;
    width: 600px;
    height: 125px;
    background-color: #262626;
}

.batdrag {
    cursor: move;
    width: 45px;
    height: 30px;
    float: left;
    margin: 0px 10px;
    background-color: #0000FF;
    border-radius: 4px;
}

<div class=bat>
    <div class="batdrag"></div>
</div>

if have this Jquery code :

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

but it only moves the blue div and I want to move the grey div with the blue one. Is it possible ?

CodePudding user response：

You can use the built in handle setting to achieve this. Select the .bat element and define draggable() on that, then set .batdrag as the handle to move the outer element around:

$(".bat").draggable({
  handle: '.batdrag'
});

.bat {
  position: absolute;
  width: 600px;
  height: 125px;
  background-color: #262626;
}

.batdrag {
  cursor: move;
  width: 45px;
  height: 30px;
  float: left;
  margin: 0px 10px;
  background-color: #0000FF;
  border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="bat">
  <div class="batdrag"></div>
</div>