vue.jsでjQuery UI Sortableを使う - Qiita
ググって見つけたコードが動いてなかったので直してみた。 コンポーネントでDOMの変更をモデルに反映させる。 <div id="ex-sortable"> <ul v-component="v-sortable" v-with="model: list"></ul> </div> <template id="sort-template"> <li v-repeat="model">{{$value}}</li> </template> Vue.component('v-sortable', { template: "#sort-template", ready: function() { var self = this; $(this.$el).sortable({ opacity: 0.6, start: function(e, ui) { ui.item.data('from', ui.
AngularJsで、Angular Drag and Dropを使ってdndを実践。 - Qiita
はじめに AngularJsでDrag&Dropを実装する際に、便利そうなライブラリを発見したので利用してみた。 ライブラリ Angular Drag and Drop 使い方 本家サイトのサンプルコードを確認しよう。 自分の例 自分の場合は、あるリストを一覧表示して、その各アイテムをdrop先のリストに登録するといったことをやった。 drag側のリスト側 <table><tr> <td ng-repeat="xxxxx in dragItems" data-drag="true" ng-model="dragItems[$index]" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}" data-jqyoui-options="{revert: 'invalid', helper: 'cl
ドラッグ＆ドロップ－HTML5のAPI、および、関連仕様
■ドラッグ＆ドロップとは ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。 ドラッグ＆ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすいでしょう。 ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと、 ドロップ操作はその動かしたデータをドロップ先の要素内に配置することです。 ■HTML側では、ドラッグする要素にdraggable属性を指定する HTML側では、ドラッグする要素にdraggable属性を指定します。 draggable属性の値
ドラッグ＆ドロップを検出する
ドラッグ＆ドロップを検出するには、onDragStartのイベントを補足して、dataTransferのメソッドでデータを受け渡します。 draggable属性がデフォルトで有効なのはimg要素とa要素だけなので、その他はドラッグ＆ドロップを行わせる場合は明示的にdraggable=”true”に指定する必要があります。 ５つの花を四角の中にドロップして移動させるサンプルです。 ここにドロップして下さい。 <img draggable="true" id="flower" ondragstart="onDragStart1(event)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc
アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう
HTML5のDrag and Drop APIは、Insider.NETの読者諸氏ならば習得が容易なはずだ。なぜなら、ドラッグ＆ドロップの実装方法が.NET FrameworkのWindowsフォーム・アプリケーションのそれと類似しているからだ。 HTML 5のDrag and Drop APIの実装方法は「ドラッグ操作」と「ドロップ操作」に切り分けて考える必要があるが、この考え方はずばりWindowsフォーム・アプリケーションのそれと同様である。これは、Drag and Drop APIの設計にマイクロソフトが大きな影響を与えている点に由来している。 WHATWG（Web Hypertext Application Technology Working Group）がHTML5の仕様策定を進める際、「先進的な機能を実装しているブラウザの挙動を規格化する」という基本理念があった。マイクロソ
ネイティブのドラッグ & ドロップ - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「Native Drag and Drop」を日本語訳したものです。 原文タイトル Native Drag and Drop 原文ページ URL http://html5doctor.com/native-drag-and-drop/ 著者 Remy Sharp 氏 原文投稿日 2009-07-09 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 ネイテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
GitHub - lain-dono/vue-dnd: DnD (drag and drop) plugin for Vue.js
An error occured
GitHub - logicbomb/lvlDragDrop: Native AngularJS drag and drop directive
AngularJS native drag and drop
HTML5のドラッグアンドドロップAPIについて - 犬メモ！スーパー
ひま あそび