我的图片鼠标选框

This commit is contained in:
Wisp X 2021-12-25 01:38:58 +08:00
parent 50d79fc2c2
commit 5cd405ea7c
7 changed files with 465 additions and 690 deletions

1097
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -20,6 +20,7 @@
"blueimp-load-image": "^5.16.0",
"clipboard": "^2.0.8",
"deepmerge": "^4.2.2",
"dragselect": "^2.2.2",
"jquery": "^3.6.0",
"jquery.photoswipe": "^1.1.1",
"justifiedGallery": "^3.8.1",

15
public/css/app.css vendored
View File

@ -941,8 +941,11 @@ select {
.cursor-pointer {
cursor: pointer;
}
.cursor-not-allowed {
cursor: not-allowed;
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select-all {
-webkit-user-select: all;
@ -1543,18 +1546,10 @@ select {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.hover\:bg-blue-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
}
.hover\:bg-blue-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));

1
public/js/dragselect/ds.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -11,5 +11,6 @@
"/js/justified-gallery/jquery.justifiedGallery.min.js": "/js/justified-gallery/jquery.justifiedGallery.min.js",
"/css/viewer-js/viewer.min.css": "/css/viewer-js/viewer.min.css",
"/js/viewer-js/viewer.min.js": "/js/viewer-js/viewer.min.js",
"/js/clipboard/clipboard.min.js": "/js/clipboard/clipboard.min.js"
"/js/clipboard/clipboard.min.js": "/js/clipboard/clipboard.min.js",
"/js/dragselect/ds.min.js": "/js/dragselect/ds.min.js"
}

View File

@ -49,7 +49,7 @@
</div>
<div class="relative inset-0 h-full">
<!-- content -->
<div id="photos-scroll" class="absolute inset-0 overflow-y-scroll">
<div id="photos-scroll" class="absolute inset-0 overflow-y-scroll select-none">
<div id="photos-grid"></div>
</div>
<!-- right drawer -->
@ -64,7 +64,7 @@
</div>
<script type="text/html" id="photos-item">
<a href="javascript:void(0)" class="relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
<a href="javascript:void(0)" class="photos-item relative cursor-default rounded outline outline-2 outline-offset-2 outline-transparent">
<div class="photo-select absolute z-[1] top-1 right-1 rounded-full overflow-hidden text-white text-lg bg-white border border-gray-500 cursor-pointer hidden group-hover:block">
<i class="fas fa-check-circle block"></i>
</div>
@ -88,6 +88,7 @@
@push('scripts')
<script src="{{ asset('js/justified-gallery/jquery.justifiedGallery.min.js') }}"></script>
<script src="{{ asset('js/viewer-js/viewer.min.js') }}"></script>
<script src="{{ asset('js/dragselect/ds.min.js') }}"></script>
<script>
let gridConfigs = {
rowHeight: 180,
@ -151,6 +152,7 @@
}
$photos.append(html);
ds.setSelectables($photos.find('.photos-item'));
},
complete: function () {
if ($photos.html() !== '') {
@ -227,16 +229,29 @@
resetImages({page: 1, keyword: $(this).val()});
}
});
$photos.on('click', '.photo-mask', function () {
$(this).siblings('img').trigger('click');
</script>
<script>
const ds = new DragSelect({
area: document.getElementById('photos-grid'),
keyboardDrag: false,
// multiSelectMode: true,
// multiSelectToggling: false,
});
$photos.on('click', 'a .photo-select', function (e) {
e.stopPropagation();
$(this).closest('a').toggleClass('selected');
}).on('mousedown', 'a', function () {
}).on('mouseup', 'a', function () {
// 预期使用组件内部 api 实现单击选择图标进行选择/反选,但是 click 事件总在组件的 mousedown 事件后触发。
// 并且组件没有提供跳过某个元素选择的 api只能通过组件选框然后自定义 class 来判断选中项目。
// see https://github.com/ThibaultJanBeyer/DragSelect/issues/113#issuecomment-1000904432
// TODO 可能有更优的解决方案?
ds.subscribe('dragstart', ({ event }) => {
if ($(event.target).hasClass('justified-gallery')) {
$photos.find('a.photos-item').removeClass('selected');
}
});
ds.subscribe('dragmove', ({ items, event}) => {
$(items).addClass('selected');
});
$photos.on('click', '.photo-select', function (e) {
$(this).closest('a.photos-item').toggleClass('selected');
});
</script>
@endpush

3
webpack.mix.js vendored
View File

@ -34,3 +34,6 @@ mix.copy('node_modules/viewerjs/dist/viewer.min.js', 'public/js/viewer-js')
// clipboard
mix.copy('node_modules/clipboard/dist/clipboard.min.js', 'public/js/clipboard')
// dragselect
mix.copy('node_modules/dragselect/dist/ds.min.js', 'public/js/dragselect')