vueで作った一覧をハンドル付きでドラックドロップできようにして、アニメーション付きでね。 Sample http://www.mztm.jp/kawamura/qiita/vue-vuetify-draggable-test/index.html Github https://github.com/kawamurashin/vue-vuetify-draggable-test vue3はvuedraggable@nextを使う <template> <div> <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" item-key="id" v-bind="dragOptions" handle=".handle"> <template #item="{element}"> <di
はじめに ドラッグで移動、拡大縮小ができるモーダルを作ってみました。 早速完成形からお見せします。 モーダルの移動 サイズ調整 移動 まずは、ヘッダー部分をドラッグすることでモーダルが移動ができるようにします。 1. テンプレート <template> <div class="draggable-modal" :style="{ width: `${modalWidth}px`, height: `${modalHeight}px`, transform: `translate(${pos.x}px, ${pos.y}px)`, }" > <div class="header" @mousedown=" (e) => { adjustDragStart(e) } " > header </div> <div class="body">body</div> </div> </template
Vue.Draggableというライブラリを利用して実現しました https://github.com/SortableJS/Vue.Draggable ▼まずは普通に表示 【js側】 データを用意します (TestViewという名前のコンポーネントにしました) <script> export default { name: "TestView", data: function () { return { list: [ { id: 1, name: 'リスト1' }, { id: 2, name: 'リスト2' }, { id: 3, name: 'リスト3' } ], } } } </script>
<template> <v-app dark> <v-container> <v-row id="main-area"> <v-col id="feed-template" class="col-4" v-for="post in posts" :key=post.id> <v-card style="overflow:scroll; height:30vh;"> <v-card-title> <nuxt-link :to="'/posts/' + post.id" class="feed-title">{{ post.title }}</nuxt-link> </v-card-title> <v-card-text class="feed-body"> <ul class="feed-items"> <li class="feed-list"> {{ post.body }} </li>
A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette. Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to a
入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation... 次の記事 ≫：ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示...
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch e
jquery.dragtable.js カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」 意外となかったカラムをドラッグ＆ドロップで並び替えるプラグイン。 比較したい値が離れていると視点の移動でやりづらくなっちゃいますが、並び替えすることで比較が簡単になりそう 特定のカラムだけ固定することも可能 関連エントリ HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」
javascriptで、画面サイズの変更や、スクロール、マウスの移動のような、短い間に大量に発生するイベントで、画面を更新するような、少し時間のかかる処理を行うと、全体の動きがぎこちなくなって、パフォーマンスが著しく低下する場合があります。 非常に使いにくい。 これを回避するには、たとえばマウスが停止したときに処理すればよいのですが、そんなイベントはありません。 ではいつやるか? ・ ・ ・ ｲﾏﾃﾞｼｮ щ（ﾟдﾟщ） ・ ・ ・ はい、すみません、違います(笑)。イマじゃなくってアトでやります。どうやるかというと、 「イベント発生で、タイマー起動。タイムアウトで処理をするのだけど、その前に同じイベントが発生したら、このタイマーを再起動」 と、これだけなんですが、単純にやっちゃうと、結構大変＆邪魔くさい。いろんなところに似たようなことを書くことになりますから。保守性も悪いし。 というこ
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 2012年08月24日- FileDrop ? cross-browser JavaScript Drag & Drop file upload ? Блог Прогера クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」。 対応ブラウザであれば以下のブラウザでドラッグ＆ドロップによるファイルアップロードが可能になります。どのJSフレームワークにも依存せず単体で使えます。 IEではIFrameを利用した画面遷移なしのファイルアップロードが可能。 ファイルをドロップすると、各種イベントハンドラが起動されて、タイミングに応じた好きな処理を記述することも出来るみたい。 関連エントリ HTML5を使ったファイルアップロード用プログラム集 jQuer
イメージファイルをアップロードする機会は、様々なコミュニケーションサービスが展開されている現在、どんどんと増えていると思いますが、ファイルをローカルから選択してアップロードするというのは直感的ではなく、リテラシーが低い層には障壁にもなりえます。今日紹介するのはそんなファイルのアップロードを簡単にしてくれる、ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」です。 こちらは、予め決められた領域にドロップするだけでイメージをアップロードすることができます。またドロップ後にプレビューを出して確認その後、アップロードするという流で誤ってアップロードするということも未然に防げる仕組みになっています。 詳しくは以下 こちらの仕組みはjQueryで制作されており、ソースファイルをダウンロードすることもできます。実際の動作デモは「File Upload!」からご
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード <script src="http://ajax.googleapis.com/
take©です。 まずはこれをみていただきたい。 Amazing! ブラウザにドロップした画像ファイルの内容が表示されているではないですか。 さらには、テキストファイル、動画ファイル、Webページのサムネイルまでドラッグ＆ドロップで表示できています。 ついにここまで来たんですね。 元ネタはこれ。 モジラのHacks Blogで公開されたDrag and Drop APIとFile APIを使ったデモです。 http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/ (元記事) http://demos.hacks.mozilla.org/openweb/DnD/ (デモ) このデモはFirefox 3.6 betaが実装したHTML5の新しい規格、Drag and Drop APIとFile APIで実現されていま
HTML5のDrag and Drop APIとFile APIを試してみました。 Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能ですので、File APIとの連携を試します。 File APIのサンプル jQueryでFile APIを使うために以下のおまじないを実行します。 jQuery.event.props.push('dataTransfer'); DropイベントとFile APIとの連携にはevent.dataTransferプロパティを使いますが、jQueryのイベントオブジェクトにはdataTransferが存在しません。このおまじないで、jQueryのeventオブジェクトにブラウザネイティブ
■ダウンロード クリックしてダウンロードして下さい。 ■動作ブラウザ Firefox 3.6+, Google Chrome 6+ ■使い方 1.HTMLでプラグインを読み込む jQuery本体を読み込んだ後にプラグインのJavaScriptを読み込む。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.dropUploader.js"></script> 2.JavaScriptでプラグインを設置する 以下のようにして、p.uploaderにファイルをドロップすると、ファイルをアップロードすることができる。 $(function()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く