jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示する方法｜DAD UNION – エンジニア同盟
jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法をご紹介します。 jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するCSS記述 ※jquery.gridster.min.cssファイルを読み込みます。複数のグリッドエリア（.gridster）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="jquery.gridster.min.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にする方法｜DAD UNION – エンジニア同盟
jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にし、あわせてliタグのdata-id値をjson形式で出力するをご紹介します。 jquery.nestable.jsを使ってネスト（入れ子）のliタグ一覧をドラッグ＆ドロップ可能にするCSS記述 ※liタグ一覧エリア（.nestable-lists）、json形式の出力エリア（#nestable-output）のCSS記述です。必要に応じて変更して下さい。 <style> body { margin: 0; padding: 0; font-size: 20px; line-height: 1.8em; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.8em; padding: 15p
jquery.tablednd.jsを使ってtableタグの行（順番）をドラッグ＆ドロップで変更する方法｜DAD UNION – エンジニア同盟
jquery.tablednd.jsを使ってtableタグの行（順番）をドラッグ＆ドロップで変更する方法をご紹介します。 tableタグの行（順番）をドラッグ＆ドロップで変更するCSSの記述 ※tableタグ（#table-1）のCSSです。必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ text-align: center; font-size: 16px; } h1{ text-align: center; padding: 10px 0 0 0; font-size: 18px; font-weight: bold; } #table-1{ width: 260px; margin: 0 auto; border-top:solid 1px #cccccc; border-left:solid 1px #cccccc; border
ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させる方法【JavaScriptプラグイン未使用】｜DAD UNION – エンジニア同盟
JavaScriptプラグインを使用せず、ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させる方法をご紹介します。 ドラッグ＆ドロップで2つのdivタグ要素エリア間を移動させるタグ要素のCSS記述 ※ドラッグ元エリア（#dpsmpla）・ドロップ先エリア（#dpsmplb）・ドラッグ＆ドロップ要素（#dgsmpla,#dgsmplb,#dgsmplc）のCSS記述です。必要に応じて書き換えてください。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; te
ウェブ開発を彩る小技：jquery.pep.jsを用いたドラッグ＆ドロップ機能の実装｜DAD UNION – エンジニア同盟
こんにちは、今回はWeb開発のちょっとした技術、特にjquery.pep.jsを使用したドラッグ＆ドロップ機能の実装方法についてご紹介します。この技術は、ユーザーインターフェースをよりダイナミックで、使いやすくするための素晴らしい方法です。エンジニアだけでなく、これから学ぼうとする初心者にも分かりやすく解説していきたいと思います。 jquery.pep.jsとは？ jquery.pep.jsは、タグや画像といった要素をWebページ内で自由にドラッグ＆ドロップできるようにするJavaScriptライブラリです。このライブラリを利用することで、ウェブページ上の要素をマウスやタッチ操作で移動できるようになり、よりインタラクティブなウェブアプリケーションやゲームの開発が可能になります。 環境設定、JavaScriptの記述 まず始めに、jquery.pep.jsを使用するためには、jQueryも併
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
