Vuejs에서 드래그 앤 드롭
8988 단어 cssvuewebdevproductivity
이것은 매우 작은 응용 프로그램이기 때문에 우리는 Vue CLI를 사용하지 않고 Vuejs 스크립트 표시를 사용할 것이다.또한 CLI가 제공할 수 있는 모든 기능을 제공합니다.
언제든지 사용 가능한 Vue 템플릿
만약 Vue에서 웹 응용 프로그램을 구축하고 있다면, 프로젝트를 다운로드하고 사용할 수 있도록 Vue 템플릿을 서명하는 것을 권장합니다.예쁜 인터페이스가 있고 사용자 정의가 쉽기 때문이다.그것들은 당신을 위해 많은 시간을 절약할 수 있으며, 응용 프로그램을 위해 사용자 인터페이스를 만드는 데 이 시간을 들여야 한다.WrapPixel에서 체크아웃best vue templates.WrapPixel는 Vue, Angular, React, Bootstrap 프레임워크에서 고품질의 관리 계기판을 제공하는 것으로 유명하다.
프로젝트 디렉터리를 설정할 때부터 데스크톱 디렉터리에 폴더를 만들 것입니다. 이것은 우리가 프로그램을 설정할 곳입니다.
기본적으로 우리는 두 개의 파일, 한 개의 파일
index.html과 한 개의 파일main.js만 필요로 한다.우리의 모든 템플릿 코드는 index.html 파일로 이동하고, 우리의 모든 Vuejs 코드는 main.js 파일로 이동합니다.Vue 드래그 앤 드롭 이미지 업로드
이렇게 하려면 터미널을 열고 다음을 입력합니다.
cd desktop && mkdir vuedragndrop && cd vuedragndrop
touch index.html && touch main.js
code .
우리는 색인을 수정하는 것부터 시작할 것이다.html 파일, 방법은 사용자 정의 html 5 템플릿을 추가하고 Vue 스크립트 태그를 추가하는 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="main.js"></script>
</body>
</html>
div 의 app 를 만듭니다. 이것이 바로 우리가 모든 Vuejs 코드를 작성하는 곳입니다.실시간 서버에서 응용 프로그램을 실행해야 합니다.NPM을 사용하여 선택한 모든 실시간 서비스를 설치할 수 있습니다.이 작업을 완료하면
main.js 파일에서 Vuejs 인스턴스를 작성해야 합니다.var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
new Vue() 방법으로 Vuejs 실례를 만들고 message 파일에서 인용한 index.html 데이터 속성을 정의합니다.우리는 간단한 사용자 인터페이스를 만들어서 드래그 포인트를 표시할 것이다.id가
app인 div에 다음 태그를 추가합니다. <div id="app">
<div class="container">
<h4>Drag and Drop here</h4>
</div>
{{message}}
</div>
And then add this styles in the head tag:
<style>
.container {
width: 350px;
height: 350px;
border: 2px dotted gray
}
.container h4 {
text-align: center;
font-family: sans-serif;
}
</style>
데이터 속성 추가
상자에 저장된 파일을 저장할 데이터 속성을 추가해야 합니다.이를 위해 다음 내용을 Vue 인스턴스의 데이터 속성에 추가합니다.
files: [],
@drop 이벤트를 추가하고, 응용 프로그램이 불러오기 전에 숨기기 v-cloak 속성을 추가합니다.지금 우리의 div는 이렇게 해야 한다.
<div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
<h4>Drag and Drop here</h4>
</div>
{{tags}} 메서드를 정의해야 합니다.이를 위해 Vue 인스턴스에 methods 객체를 생성합니다. 이 객체는 모든 Vuejs 메서드를 저장합니다. addFile(e) {
let files = e.dataTransfer.files;
[...files].forEach(file => {
this.files.push(file);
console.log(this.files)
});
}
우리가 할 수 있는 것은
addFile 표시를 사용하여 상자에 선택한 이미지를 표시하는 것이다.코드를 수정하여 이 기능을 추가합니다. <div class="container" v-cloak @drop.prevent="addFile" @dragover.prevent>
<h4>Drag and Drop here</h4>
<li v-for="(file,id) in files" :key="id" class="list-group-item mb-3 border-top">
{{ file.name }} ({{ file.size }} kb)
<button>Remove</button>
</div>
VUEJ 드래그에서 이미지 제거
"삭제"단추에 방법을 추가하여
<li> 그룹에서 파일을 삭제하는 방법도 추가할 수 있습니다.<button @click="removeFile(file)">Remove</button>
files 메서드를 만듭니다. removeFile(file) {
this.files = this.files.filter(f => {
return f != file;
});
},
removeFile 스토리지에서 파일을 삭제할 수 있습니다.한 걸음 더 나아가 각 파일의 측면을 포맷하기 위한 Vuejs 필터를 만듭니다.필터 객체를 작성하고 이 메서드를 추가합니다.
filters: {
kb(val) {
return Math.floor(val / 1024);
}
},
{{ file.name }} ({{ file.size | kb }} kb)
Bootstrap을 사용하여 Vue 드래그 앤 드롭 설계
사용자 인터페이스를 더욱 좋게 보이게 하기 위해 안내 CSS CDN과 구글 글꼴을 응용 프로그램에 추가할 수 있습니다.HTML을 다음으로 수정합니다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag and Drop</title>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
font-family: "Kumbh Sans", sans-serif;
}
.wrapper {
width: 350px;
height: 350px;
border: 2px dotted gray;
}
</style>
</head>
추가되면 다음과 같이 태그를 수정할 수 있습니다.
<body>
<div id="app">
<nav class="navbar navbar-light bg-info">
<div class="container">
<a class="navbar-brand" href="#">Vue Drag and Drop</a>
</div>
</nav>
<div class="container">
<div class="row mt-4">
<div class="col-md-6 offset-md-3">
<div
class="wrapper px-2"
v-cloak
@drop.prevent="addFile"
@dragover.prevent
>
<h4 class="mt-3 text-center">Drag and Drop here</h4>
<ul class="list-group">
<li class="list-group-item" v-for="(file,id) in files">
{{ file.name }} ({{ file.size | kb }} kb)
<button
class="btn btn-danger btn-sm float-right"
@click="removeFile(file)"
>
x
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src=" main.js"></script>
</body>
이제 응용 프로그램은 다음과 같습니다.
Reference
이 문제에 관하여(Vuejs에서 드래그 앤 드롭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/suniljoshi19/implementing-drag-and-drop-in-vuejs-276c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drag and Drop</title>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
font-family: "Kumbh Sans", sans-serif;
}
.wrapper {
width: 350px;
height: 350px;
border: 2px dotted gray;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-light bg-info">
<div class="container">
<a class="navbar-brand" href="#">Vue Drag and Drop</a>
</div>
</nav>
<div class="container">
<div class="row mt-4">
<div class="col-md-6 offset-md-3">
<div
class="wrapper px-2"
v-cloak
@drop.prevent="addFile"
@dragover.prevent
>
<h4 class="mt-3 text-center">Drag and Drop here</h4>
<ul class="list-group">
<li class="list-group-item" v-for="(file,id) in files">
{{ file.name }} ({{ file.size | kb }} kb)
<button
class="btn btn-danger btn-sm float-right"
@click="removeFile(file)"
>
x
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src=" main.js"></script>
</body>
Reference
이 문제에 관하여(Vuejs에서 드래그 앤 드롭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/suniljoshi19/implementing-drag-and-drop-in-vuejs-276c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
