Move a div with a small square

Question

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;
}

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 ?

user_519413 · Answer

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;
}

Move a div with a small square

1 Answers