啓文社 - 2010.10.15　[jQuery] ドラッグ＆ドロップ

トップ > 2010年 > 2010.10.15　[jQuery] ドラッグ＆ドロップ

[jQuery] ドラッグ＆ドロップ
2010.10.15記

今回は、jQueryを使い iGoogle のようにコンテンツブロックをドラッグ＆ドロップで移動できる JavaScript を設置してみます。
http://weboook.blog22.fc2.com/blog-entry-174.html このサイトがいろいろなスクリプトを紹介しており、その中で、 How to Mimic the iGoogle Interface | Nettuts+ が jQuery でなかなかカッコよかったので、これを設置してみようと思います。

設置サンプル

L1

Left 1:
Content
Area
L2

Left 2:
Content
Area

C1

Center 1:
Content
Area
C2

Center 2:
Content
Area

R1

Right 1:
Content
Area
R2

Right 2:
Content
Area

ファイル配置

ダウンロードしたファイルのうち、当サイトで利用したファイルの配置（[xxx]はディレクトリ）

[files/20101015]
  -- inettuts.css
  -- inettuts.js
  -- inettuts.js.css
  -- jquery-ui-personalized-1.6rc2.min.js
  [img]
    -- buttons.gif
    -- widget-content-bg.png

jQuery はファイルを設置せず、Google Libraries API を利用しています。

HTML

<div id="columns">

    <ul id="column1" class="column">
        <li class="widget color-green" id="intro">
            <div class="widget-head">
                <h3>L1</h3>
            </div>
            <div class="widget-content">
                <p>Left 1:<br />Content<br />Area</p>
            </div>
        </li>
        <li class="widget color-red">  
            <div class="widget-head">
                <h3>L2</h3>
            </div>
            <div class="widget-content">
                <p>Left 2:<br />Content<br />Area<br /> </p>
            </div>
        </li>
    </ul>

    <ul id="column2" class="column">
        <li class="widget color-blue">  
            <div class="widget-head">
                <h3>C1</h3>
            </div>
            <div class="widget-content">
                <p>Center 1:<br />Content<br />Area<br /> <br /> </p>
            </div>
        </li>
        <li class="widget color-yellow">  
            <div class="widget-head">
                <h3>C2</h3>
            </div>
            <div class="widget-content">
                <p>Center 2:<br />Content<br />Area</p>
            </div>
        </li>
    </ul>

    <ul id="column3" class="column">
        <li class="widget color-orange">  
            <div class="widget-head">
                <h3>R1</h3>
            </div>
            <div class="widget-content">
                <p>Right 1:<br />Content<br />Area</p>
            </div>
        </li>
        <li class="widget color-white">  
            <div class="widget-head">
                <h3>R2</h3>
            </div>
            <div class="widget-content">
                <p>Right 2:<br />Content<br />Area<br /> <br /> </p>
            </div>
        </li>
        
    </ul>

</div>

<link href="./files/20101015/inettuts.css" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript" src="./files/20101015/jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="./files/20101015/inettuts.js"></script>

Google Libraries API の現在のlatest versionは「1.4.2」だが、このスクリプトでは変な動作をするため「1.2.6」と指定しました。

JavaScript (inettuts.js)

変更した部分のみ掲載

settings : {
	columns : '.column',
	widgetSelector: '.widget',
	handleSelector: '.widget-head',
	contentSelector: '.widget-content',
	widgetDefault : {
		movable: true,
		removable: true,
		collapsible: true,
		editable: true,
		colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green']
	},
	widgetIndividual : {
		/* id="intro" に個別の動作を設定できる
		intro : {
			movable: false,  // 移動
			removable: false,  // 削除
			collapsible: false,  // 内容部の表示
			editable: false  // 編集
		}
		*/
	}
},

init : function () {
	// パスを変更
	this.attachStylesheet('./files/20101015/inettuts.js.css');
	this.addWidgetControls();
	this.makeSortable();
},

そのほかには、「Edit」部に表示される文字列を変更しました。

CSS(inettuts.css)

#columns img, #columns p, #columns h1, #columns h2, #columns h3, #columns h4, 
#columns h5, #columns h6, #columns ul, #columns ol, #columns li {
	margin:0; padding:0; list-style:none; border:none;
}

#columns { font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; width:616px; }
#columns a { color:white; }


/* Colors */
.color-yellow {background:#f2bc00;}
.color-red	{background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,
.color-white h3,
.color-green h3
	{color:#000;}
.color-red h3,
.color-blue h3,
.color-orange h3
	{color:#FFF;}

/* Columns section */
#columns .column {
	float: left;
	width: 33.2%;
		/* Min-height: */
		min-height: 400px;
		height: auto !important; 
		height: 400px;
}

/* Column dividers */
#columns #column1 { border-right:1px dashed #aaa; }
#columns #column3 { border-left:1px dashed #aaa; }

#columns #column1 .widget { margin: 20px 10px 0 10px; }
#columns #column3 .widget { margin: 20px 10px 0 10px; }
#columns .widget {
	margin: 20px 10px 0 10px;
	padding: 2px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#columns .widget .widget-head {
	color: #000;
	overflow: hidden;
	width: 100%;
	height: 30px;
	line-height: 30px;
}
#columns .widget .widget-head h3 {
	padding: 0 5px;
	float: left;
}
#columns .widget .widget-content {
	background: #333 url(img/widget-content-bg.png) repeat-x;
	padding: 0 5px;
	color: #DDD;
	-moz-border-radius-bottomleft: 2px;
	-moz-border-radius-bottomright: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-webkit-border-bottom-right-radius: 2px;
	line-height: 1.2em;
	overflow: hidden;
}
#columns .widget .widget-content p {
	padding: 0.8em 0;
}
#columns .widget .widget-content img {
	float: right;
	margin: 10px;
	border: 1px solid #FFF;
}
#columns .widget .widget-content pre {
	padding: 0.5em 5px;
	color: #EEE;
	font-size: 12px;
}
#columns .widget .widget-content ul {
	padding: 5px 0 5px 20px;
	list-style: disc;
}
#columns .widget .widget-content ul li {padding: 3px 0;}
#columns .widget .widget-content ul.images {
	padding: 7px 0 0 0;
	list-style: none;
	height: 1%;
}
#columns .widget .widget-content ul.images li {
	display: inline;
	float: left;
}
#columns .widget .widget-content ul.images img {
	display: inline;
	float: left;
	margin: 0 0 7px 7px;
}

CSS(inettuts.js.css)

.widget-head a.remove  {
	float: right;
	display: inline;
	background: url(img/buttons.gif) no-repeat -24px 0;
	width: 14px;
	height: 14px;
	margin: 8px 4px 8px 0;
	text-indent: -9999em;
	outline: none;
}

.widget-head a.edit  {
	float: right;
	display: inline;
	background: url(img/buttons.gif) no-repeat;
	width: 24px;
	height: 14px;
	text-indent: -9999em;
	margin: 8px 4px 8px 4px;
	outline: none;
}

.widget-head a.collapse  {
	float: left;
	display: inline;
	background: url(img/buttons.gif) no-repeat -52px 0;
	width: 14px;
	height: 14px;
	text-indent: -9999em;
	margin: 8px 0 8px 4px;
	outline: none;
}

#columns .widget-placeholder { border: 2px dashed #999;}
#column1 .widget-placeholder { margin: 20px 10px 0 10px; }
#column2 .widget-placeholder { margin: 20px 10px 0 10px; }
#column3 .widget-placeholder { margin: 20px 10px 0 10px; }

.edit-box {
	overflow: hidden;
	background: #333 url(img/widget-content-bg.png) repeat-x;
	margin-bottom: 2px;
	padding: 10px 0;
}
.edit-box input { width:100px; }

.edit-box li.item {
	padding: 10px 0;
	overflow: hidden;
	float: left;
	width: 100%;
	clear: both;
}


.edit-box label {
	float: left;
	width: 30%;
	color: #FFF;
	padding: 0 0 0 10px;
}

.edit-box ul.colors li {
	width: 16px;
	height: 16px;
	border: 1px solid #EEE;
	float: left;
	display: inline;
	margin: 0 5px 0 0;
	cursor: pointer;
}

マージンと「Edit」のカラーの四角のサイズをいじったぐらい

How to Mimic the iGoogle Interface | Nettuts+ のデモやダウンロードファイルでは、背景は黒でしたが、当サイトに合わせるため白色にしました。
このようなデモでは、そのスクリプトだけで設置してあるのがほとんどです。そのままを既サイトの中に組み込むとなると、ファイルのパスや既CSSによる設置CSSへの影響など、なかなか手ごわい問題が多数あります。
当サイトも苦労して設置してみました。当サイトに設置したHTML, JS, CSS などを掲載しておきたいと思います。自分自身の備忘録としてなのかも(^^ゞ

この記事の1行目に飛ぶ

2010.11.15　クラウド

2010年

2010.09.15　液晶テレビ