mirror of
https://github.com/lsky-org/lsky-pro.git
synced 2025-01-08 11:57:52 +08:00
✨ 我的图片鼠标选框
This commit is contained in:
parent
50d79fc2c2
commit
5cd405ea7c
1097
package-lock.json
generated
1097
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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
15
public/css/app.css
vendored
@ -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
1
public/js/dragselect/ds.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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"
|
||||
}
|
||||
|
@ -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
3
webpack.mix.js
vendored
@ -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')
|
||||
|
Loading…
Reference in New Issue
Block a user