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>

More Related Contents:

  1. JS hide function error
  2. How to read with JavaScript [closed]
  3. Get the longest text in HTML document using Jquery or javascript
  4. CSS Circle without using background [closed]
  5. Create a field to accept tags HTML/JS [closed]
  6. Can I hide the HTML5 number input’s spin box?
  7. Changing CSS Values with Javascript
  8. Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself)
  9. Add a tooltip to a div
  10. Is it possible to hide the cursor in a webpage using CSS or Javascript?
  11. Changing nav-bar color after scrolling?
  12. Text-overflow ellipsis on left side
  13. How to detect which one of the defined font was used in a web page?
  14. How to create a sticky navigation bar that becomes fixed to the top after scrolling
  15. How to change CSS :root color variables in JavaScript
  16. How to change style of iframe content cross-domain?
  17. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  18. How to print HTML content on click of a button, but not the page? [duplicate]
  19. Save a pre element as PDF with CSS
  20. jQuery Validation using the class instead of the name value
  21. Center flex item in container, when surrounded by other flex items
  22. Change the style of :before and :after pseudo-elements? [duplicate]
  23. How to create checkbox inside dropdown?
  24. Javascript-Setting background image of a DIV via a function and function parameter
  25. Remove scrollbar but not scrolling functionality [duplicate]
  26. Gaussian Blur onHover Using jQuery
  27. Google’s Imageless Buttons
  28. Detect if dropdown navigation would go off screen and reposition it
  29. How to apply background-color to a selected option?
  30. Get All Elements in an HTML document with a specific CSS Class

Leave a Comment