Vue3(typescript) vue.draggable.nextを使ってみる - Qiita
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
Vueで可変モーダルを実装する - Qiita
はじめに ドラッグで移動、拡大縮小ができるモーダルを作ってみました。 早速完成形からお見せします。 モーダルの移動 サイズ調整 移動 まずは、ヘッダー部分をドラッグすることでモーダルが移動ができるようにします。 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.js】ドラッグで順番を変えられるリストを作った - Qiita
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>
【Vue.Draggable】リストやdivタグ以外の要素で、ドラッグアンドドロップで並び替えする方法【Vuetify】 - Qiita
<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>
Interactive Drag and Drop Coloring Concept | Codrops
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
ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」:phpspot開発日誌
入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation... 次の記事 ≫：ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示...
Draggable Elements That Push Others Out Of Way | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. 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 elemen
カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」:phpspot開発日誌
jquery.dragtable.js カラムをドラッグして並び替えが可能なテーブルを実装できるjQueryプラグイン「jquery.dragtable」 意外となかったカラムをドラッグ＆ドロップで並び替えるプラグイン。 比較したい値が離れていると視点の移動でやりづらくなっちゃいますが、並び替えすることで比較が簡単になりそう 特定のカラムだけ固定することも可能 関連エントリ HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 テーブルを様々なグラフに自動変換できるjQueryプラグイン「HighchartTable」 テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」
JavaScriptで連続したイベント処理の体感速度を上げる方法｜たかみんつ
javascriptで、画面サイズの変更や、スクロール、マウスの移動のような、短い間に大量に発生するイベントで、画面を更新するような、少し時間のかかる処理を行うと、全体の動きがぎこちなくなって、パフォーマンスが著しく低下する場合があります。 非常に使いにくい。 これを回避するには、たとえばマウスが停止したときに処理すればよいのですが、そんなイベントはありません。 ではいつやるか? ・ ・ ・ ｲﾏﾃﾞｼｮ щ（ﾟдﾟщ） ・ ・ ・ はい、すみません、違います(笑)。イマじゃなくってアトでやります。どうやるかというと、 「イベント発生で、タイマー起動。タイムアウトで処理をするのだけど、その前に同じイベントが発生したら、このタイマーを再起動」 と、これだけなんですが、単純にやっちゃうと、結構大変＆邪魔くさい。いろんなところに似たようなことを書くことになりますから。保守性も悪いし。 というこ
ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」:phpspot開発日誌
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」:phpspot開発日誌
クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 2012年08月24日- FileDrop ? cross-browser JavaScript Drag & Drop file upload ? Блог Прогера クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」。 対応ブラウザであれば以下のブラウザでドラッグ＆ドロップによるファイルアップロードが可能になります。どのJSフレームワークにも依存せず単体で使えます。 IEではIFrameを利用した画面遷移なしのファイルアップロードが可能。 ファイルをドロップすると、各種イベントハンドラが起動されて、タイミングに応じた好きな処理を記述することも出来るみたい。 関連エントリ HTML5を使ったファイルアップロード用プログラム集 jQuer
ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」
イメージファイルをアップロードする機会は、様々なコミュニケーションサービスが展開されている現在、どんどんと増えていると思いますが、ファイルをローカルから選択してアップロードするというのは直感的ではなく、リテラシーが低い層には障壁にもなりえます。今日紹介するのはそんなファイルのアップロードを簡単にしてくれる、ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」です。 こちらは、予め決められた領域にドロップするだけでイメージをアップロードすることができます。またドロップ後にプレビューを出して確認その後、アップロードするという流で誤ってアップロードするということも未然に防げる仕組みになっています。 詳しくは以下 こちらの仕組みはjQueryで制作されており、ソースファイルをダウンロードすることもできます。実際の動作デモは「File Upload!」からご
ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
Netforest Developer's Note - HTML5 Drag and Drop APIとFile APIのデモ
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で実現されていま
Drag and DropとFile APIを試す - NullPointer's
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オブジェクトにブラウザネイティブ
File APIを使ってドロップでファイルをアップロードできるjQueryプラグインを作ってみる | @blog.justoneplanet.info
■ダウンロード クリックしてダウンロードして下さい。 ■動作ブラウザ 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ページを開く
大きな写真をドラッグ＆ドロップでスクロールできるようにする「Dragscroll」:phpspot開発日誌
Ajaxアップ＆ドロップでアップできるアップローダーデモ＆サンプル:phpspot開発日誌
ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」:phpspot開発日誌
ドラッグ中の画面更新カクカク防止 - ぱぱろぐのこころぐ