Question

以下是我想要的功能，但我不知道如何实现它或者我应该google什么词，非常感谢。

Answer 1

这是使用JQuery提供的Selectable（）时最接近的。我在下面提供了一个演示：

＆＃13;

$(function() {
  $("#selectable").selectable();
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

此库可满足您的需求 https://thibaultjanbeyer.github.io/DragSelect/

如何使用鼠标拖动和选择项目来实现这样的GIF

2 个答案: