[Solved] How to implement something like this GIF that using mouse drag and select items

by


This is the closest you could get with the use of Selectable() provided by JQuery. I have provided a demonstration below: 

$(function() {
  $("#selectable").selectable();
});
#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  margin: 0;
  padding: 0;
  width: 60%;
  display:inline;
}

#selectable img {
  margin: 3px;
  padding: 0.4em;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <div id = "selectable">
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/><img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <br>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/><img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <br>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/><img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <br>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/><img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    <img class = "ui-widget-content" src="https://image.flaticon.com/teams/slug/freepik.jpg"/>
    </div>

6

solved How to implement something like this GIF that using mouse drag and select items