Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
tx_find_match
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
tx_find_match
Commits
c5ea2600
Commit
c5ea2600
authored
Jan 12, 2023
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 添加拖拽
parent
ea7c40a1
Changes
15
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
1587 additions
and
1116 deletions
+1587
-1116
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+1
-1
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+33
-0
Unit.ts
form_angular/src/app/common/custom-hot-zone/Unit.ts
+184
-791
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+197
-21
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+6
-105
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+925
-134
upload-dragon-bone.component.html
...mmon/upload-dragon-bone/upload-dragon-bone.component.html
+2
-2
upload-dragon-bone.component.ts
...common/upload-dragon-bone/upload-dragon-bone.component.ts
+39
-0
upload-image-with-preview.component.html
...age-with-preview/upload-image-with-preview.component.html
+4
-2
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+35
-0
upload-video.component.html
...r/src/app/common/upload-video/upload-video.component.html
+47
-56
upload-video.component.ts
...lar/src/app/common/upload-video/upload-video.component.ts
+50
-0
form.component.html
form_angular/src/app/form/form.component.html
+2
-4
form.component.ts
form_angular/src/app/form/form.component.ts
+15
-0
drag-test.html
form_angular/src/drag-test.html
+47
-0
No files found.
form_angular/src/app/common/audio-recorder/audio-recorder.component.html
View file @
c5ea2600
<div
class=
"d-flex"
>
<div
class=
"d-flex"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<div
class=
"p-btn-record d-flex"
>
<div
class=
"btn-clear"
style=
"cursor: pointer"
(
click
)="
onBtnClearAudio
()"
*
ngIf=
"withRmBtn && (audioUrl || audioBlob)"
>
<fa-icon
icon=
"times"
></fa-icon>
...
...
form_angular/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
c5ea2600
...
...
@@ -276,6 +276,39 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
linkInputed
(
url
,
name
)
{
url
=
url
.
substring
(
0
,
url
.
lastIndexOf
(
"
.
"
))
+
"
_l.mp3
"
;
this
.
audioUrl
=
url
;
this
.
audioUploaded
.
emit
({
url
});
this
.
audioName
.
emit
(
name
);
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp3
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线音频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
enum
Type
{
...
...
form_angular/src/app/common/custom-hot-zone/Unit.ts
View file @
c5ea2600
This diff is collapsed.
Click to expand it.
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
c5ea2600
This diff is collapsed.
Click to expand it.
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
c5ea2600
...
...
@@ -81,6 +81,10 @@
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
margin-top
:
1rem
;
}
...
...
@@ -89,8 +93,8 @@ h5 {
@font-face
{
font-family
:
'BRLNSR_
1'
;
src
:
url("/assets/font/BRLNSR_1.TTF
")
;
font-family
:
'ahronbd-
1'
;
src
:
url("/assets/font/ahronbd-1.ttf
")
;
}
...
...
@@ -105,106 +109,3 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
form_angular/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
c5ea2600
This diff is collapsed.
Click to expand it.
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
(
dragover
)="
handle_dragover
($
event
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
{{btnName}}
</button>
...
...
form_angular/src/app/common/upload-dragon-bone/upload-dragon-bone.component.ts
View file @
c5ea2600
...
...
@@ -178,4 +178,43 @@ export class UploadDragonBoneComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
}
linkInputed
(
ske
,
tex
,
png
)
{
this
.
skeJsonData
[
"
url
"
]
=
ske
.
url
;
this
.
skeJsonData
[
"
name
"
]
=
ske
.
name
;
this
.
texJsonData
[
"
url
"
]
=
tex
.
url
;
this
.
texJsonData
[
"
name
"
]
=
tex
.
name
;
this
.
texPngData
[
"
url
"
]
=
png
.
url
;
this
.
texPngData
[
"
name
"
]
=
png
.
name
;
this
.
animaPanelOk
();
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
ske
,
tex
,
png
}
=
JSON
.
parse
(
dt
);
if
(
!
ske
||
!
tex
||
!
png
||
ske
.
url
.
indexOf
(
"
teach
"
)
<
0
||
ske
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
ske
.
url
.
indexOf
(
"
.json
"
)
<
0
||
tex
.
url
.
indexOf
(
"
teach
"
)
<
0
||
tex
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
tex
.
url
.
indexOf
(
"
.json
"
)
<
0
||
png
.
url
.
indexOf
(
"
teach
"
)
<
0
||
png
.
url
.
indexOf
(
"
cdn
"
)
<
0
||
png
.
url
.
indexOf
(
"
.png
"
)
<
0
||
!
ske
.
name
||
!
tex
.
name
||
!
png
.
name
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
return
;
}
this
.
linkInputed
(
ske
,
tex
,
png
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线骨骼动画传递参数不合法,应该是{ske:{url:'', name:''},tex:{url:'', name:''},png:{url:'', name:''}}
"
);
}
}
}
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.html
View file @
c5ea2600
<div
class=
"position-relative"
>
<div
class=
"position-relative"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
disableUpload
"
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
>
(
nzChange
)="
handleChange
($
event
)"
>
<!--[nzBeforeUpload]="customUpload">-->
<div
class=
"p-box d-flex align-items-center"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!picUrl && !uploading"
>
...
...
form_angular/src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
c5ea2600
...
...
@@ -155,4 +155,39 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
ngOnDestroy
()
{
}
linkInputed
(
url
)
{
const
file
=
{
response
:
{
url
}
};
const
img
=
new
Image
();
img
.
addEventListener
(
'
load
'
,
()
=>
{
const
height
=
img
.
naturalHeight
;
const
width
=
img
.
naturalWidth
;
file
[
'
height
'
]
=
height
;
file
[
'
width
'
]
=
width
;
img
.
remove
();
this
.
imageUploaded
.
emit
(
file
.
response
);
});
img
.
src
=
url
;
this
.
picUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
||
dt
.
indexOf
(
"
teach
"
)
<
0
||
dt
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.jpg
"
,
"
.jpeg
"
,
"
.png
"
,
"
.bmp
"
,
"
.JPG
"
,
"
.JPEG
"
,
"
.PNG
"
,
"
.BMP
"
];
if
(
!
white
.
includes
(
dt
.
substr
(
dt
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
dt
);
}
}
form_angular/src/app/common/upload-video/upload-video.component.html
View file @
c5ea2600
<div
class=
"p-video-box"
>
<div
class=
"up-video"
style=
"display: flex;"
>
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<div
class=
"p-video-box"
(
drop
)="
handle_drop
($
event
)"
(
dragover
)="
handle_dragover
($
event
)"
>
<div
class=
"up-video"
style=
"display: flex;"
>
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
[
nzShowUploadList
]="
false
"
nzAccept =
".mp4"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
<nz-upload
class=
"p-image-uploader"
[
nzDisabled
]="
uploading
"
[
nzShowUploadList
]="
false
"
nzAccept=
".mp4"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
handleChange
($
event
)"
style=
"margin-right: 1rem"
>
<button
type=
"button"
nz-button
nzType=
"default"
*
ngIf=
"showUploadBtn"
[
disabled
]="
uploading
"
[
nzLoading
]="
uploading
"
>
[
nzLoading
]="
uploading
"
>
<i
nz-icon
nzType=
"plus"
nzTheme=
"outline"
></i>
<span>
{{ uploading ? 'Uploading' : 'Select Video' }}
</span>
<!--<span>Select Video</span>-->
...
...
@@ -25,14 +20,14 @@
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
...
...
@@ -54,41 +49,37 @@
-->
</div>
<div
class=
"p-box d-flex align-items-center p-video-uploader"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!showUploadBtn && !videoUrl && !uploading"
>
<i
nz-icon
nzType=
"upload"
nzTheme=
"outline"
></i>
<div
class=
"m-3"
></div>
<span>
Click here to upload video
</span>
<div
class=
"mt-5 p-progress-bar"
*
ngIf=
"uploading"
>
<div
class=
"p-progress-bg"
[
style
.
width
]="
progress
*
0
.
2
+'
rem
'"
></div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
[
ngClass
]="{'
smart-bar
'
:
showUploadBtn
}"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
Uploading...
<div
class=
"p-box d-flex align-items-center p-video-uploader"
>
<div
class=
"p-upload-icon"
*
ngIf=
"!showUploadBtn && !videoUrl && !uploading"
>
<i
nz-icon
nzType=
"upload"
nzTheme=
"outline"
></i>
<div
class=
"m-3"
></div>
<span>
Click here to upload video
</span>
<div
class=
"mt-5 p-progress-bar"
*
ngIf=
"uploading"
>
<div
class=
"p-progress-bg"
[
style
.
width
]="
progress
*
0
.
2
+'
rem
'"
></div>
<div
class=
"p-progress-value"
>
{{progress}}%
</div>
</div>
</div>
</div>
<div
class=
"p-upload-check-bg"
*
ngIf=
"checking"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
<div
class=
"p-upload-progress-bg dddd "
*
ngIf=
"uploading"
[
ngClass
]="{'
smart-bar
'
:
showUploadBtn
}"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
Uploading...
</div>
</div>
<div
class=
"p-upload-check-bg"
*
ngIf=
"checking"
>
<div
class=
"i-bg"
[
style
.
width
]="
progress
+'%'"
></div>
<div
class=
"i-text"
>
<fa-icon
icon=
"cloud-upload-alt"
></fa-icon>
<i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
Checking...
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && videoUrl "
>
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video
[
src
]="
safeVideoUrl
(
videoUrl
)"
controls
#
videoNode
></video>
</div>
</div>
<div
class=
"p-preview"
*
ngIf=
"!uploading && videoUrl "
>
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video
[
src
]="
safeVideoUrl
(
videoUrl
)"
controls
#
videoNode
></video>
<div
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
<span><i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
</div>
</div>
<div
[
style
.
display
]="!
checkVideoExists
?'
none
'
:
''"
>
<span><i
nz-icon
nzType=
"loading"
nzTheme=
"outline"
></i>
checking file to upload
</span>
</div>
</div>
</div>
\ No newline at end of file
form_angular/src/app/common/upload-video/upload-video.component.ts
View file @
c5ea2600
...
...
@@ -225,5 +225,55 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
// console.log(Math.floor(p * 100));
this
.
progress
=
Math
.
floor
(
p
*
100
);
}
linkInputed
(
url
,
name
)
{
const
file
=
{
response
:
{
url
}
};
const
vid
=
document
.
createElement
(
'
video
'
);
vid
.
addEventListener
(
'
loadedmetadata
'
,
()
=>
{
const
height
=
vid
.
videoHeight
;
const
width
=
vid
.
videoWidth
;
let
duration
=
vid
.
duration
;
if
(
duration
)
{
duration
=
duration
*
1000
;
}
file
[
"
height
"
]
=
height
;
file
[
"
width
"
]
=
width
;
file
[
"
duration
"
]
=
duration
;
vid
.
preload
=
'
none
'
;
vid
.
src
=
''
;
vid
.
remove
();
this
.
videoUploaded
.
emit
(
file
.
response
);
});
vid
.
src
=
file
.
response
.
url
;
this
.
videoUrl
=
url
;
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
if
(
!
dt
)
{
return
;
}
try
{
const
{
url
,
name
}
=
JSON
.
parse
(
dt
);
if
(
url
.
indexOf
(
"
teach
"
)
<
0
||
url
.
indexOf
(
"
cdn
"
)
<
0
)
{
return
;
}
const
white
=
[
"
.mp4
"
];
if
(
!
white
.
includes
(
url
.
substr
(
url
.
lastIndexOf
(
"
.
"
))))
{
return
;
}
this
.
linkInputed
(
url
,
name
);
}
catch
(
error
)
{
console
.
warn
(
"
handle_drop拖拽在线视频传递参数不合法,应该是{url:'', name:''}
"
);
}
}
}
form_angular/src/app/form/form.component.html
View file @
c5ea2600
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<div
class=
"border"
style=
"width: 1000px;"
>
<textarea
style=
"width: 955px; height: 300px;"
(
blur
)="
load
()"
#
itemTextarea
>
{{itemStr}}
</textarea>
<button
(
click
)="
copyData
();"
>
Copy
</button>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<span
style=
"font-size: 20px;"
>
标题:
</span>
...
...
@@ -19,6 +15,8 @@
></app-audio-recorder>
</div>
<div
class=
"border"
style=
"width: 1000px;"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
class=
"border"
style=
"width: 950px;"
>
...
...
form_angular/src/app/form/form.component.ts
View file @
c5ea2600
...
...
@@ -40,4 +40,19 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
item
.
audioFileName
=
name
;
this
.
save
();
}
handle_dragover
(
e
)
{
e
.
preventDefault
();
}
handle_drop
(
e
)
{
e
.
preventDefault
();
const
dt
=
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
console
.
log
(
"
handle_drop===
"
,
dt
);
// 网络文件 dt 的数据遵循如下格式
// 图片 "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// 音频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3", name: "test.mp3"};
// 视频(JSON字符串) {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// 骨骼动画(JSON字符串) {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
}
}
\ No newline at end of file
form_angular/src/drag-test.html
0 → 100644
View file @
c5ea2600
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<title>
Document
</title>
</head>
<body>
<img
id=
"drag"
style=
"width: 100px; height: 100px; background-color: gold;"
draggable=
"true"
ele-data=
"http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4"
src=
"http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png"
></img>
<div
id=
"target"
ondrop=
"handle_drop(event)"
ondragover=
"handle_dragover(event)"
style=
"position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; background: #00ffff;"
>
</div>
<script>
var
dragEl
=
document
.
getElementById
(
"
drag
"
);
dragEl
.
ondragstart
=
function
(
e
)
{
// 图片
// const dt = "http://staging-teach.cdn.ireadabc.com/f38f9928-c3bd-47f8-9ed1-43c0e03d2f30.png";
// e.dataTransfer.setData("text/plain", dt);
// 音频
const
dt
=
{
url
:
"
http://staging-teach.cdn.ireadabc.com/1c8694612563f4e2da707f1f6a37d066_l.mp3
"
,
name
:
"
test.mp3
"
};
e
.
dataTransfer
.
setData
(
"
text/plain
"
,
JSON
.
stringify
(
dt
));
// 视频
// const dt = {url: "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec_l.mp4", name: "视频.mp4"};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt));
// 骨骼动画
// const dt = {"ske":{"url":"http://staging-teach.cdn.ireadabc.com/3d4a36b83aada60709771fbe15e2b6db.json","name":"飞鸟_ske.json"},"tex":{"url":"http://staging-teach.cdn.ireadabc.com/08a676a5f456634f9c6c90e9efd3c2ea.json","name":"飞鸟_tex.json"},"png":{"url":"http://staging-teach.cdn.ireadabc.com/874393ecf5e0cd42a09f5b34d48854d2.png","name":"飞鸟_tex.png"}};
// e.dataTransfer.setData("text/plain", JSON.stringify(dt))
}
dragEl
.
drop
=
function
(
e
)
{
e
.
dataTransfer
.
getData
(
"
text/plain
"
);
}
var
target
=
document
.
getElementById
(
'
target
'
)
// target.ondragover = handle_dragover
function
handle_dragover
(
e
)
{
e
.
preventDefault
()
}
function
handle_drop
(
e
)
{
}
</script>
</body>
</html>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment