~smagoun/whoopsie/whoopsie-lp1017637

Both lists are sortable, but List #1 can move its items into List #2 and they become sortable. However, List #2 <strong>can not</strong> move its items into List #1.</p>

</div>

<style>

#demo h4 {

margin: 10px auto;

width: 165px;

text-align: center;

}

#demo ul {

margin: 0 auto;

width: 165px;

padding: 0;

}

#demo li {

list-style-type: none;

padding: 3px;

width: 150px;

margin: 6px;

font-size: 114%;

-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

cursor: move;

}

#demo li.one {

background-color: #B6BFDA;

border: 1px solid #7E869D;

}

#demo li.two {

background-color: #F2C89F;

border: 1px solid #B19C87;

text-align: center;

}

#demo .indent1{

text-indent:0.8em;

}

#demo .indent2{

text-indent:1.6em;

}

#demo .indent3{

text-indent:2.4em;

}

#demo .indent4{

text-indent:3.2em;

}

#demo .indent5{

text-indent:4.0em;

}

#demo .indent6{

text-indent:4.8em;

}

#demo .indent7{

text-indent:5.6em;

}

#demo .indent8{

text-indent:6.4em;

}

#demo .indent9{

text-indent:7.2em;

}

#demo .indent10{

text-indent:8.0em;

}

.example .arrow {

display: none;

height: 28px;

margin: 10px auto;

width: 300px;

position: relative;

background-repeat: no-repeat;

100

}

101

102

.example .arrow em {

103

display: block;

104

position: absolute;

105

top: 0;

106

right: 0;

107

height: 28px;

108

width: 19px;

109

background-repeat: no-repeat;

110

}

111

112

.example .arrow div {

113

height: 8px;

114

position: relative;

115

top: 10px;

116

margin: 0 5px;

117

font-size: 1px; /* for IE */

118

background-color: #d9d9d9;

119

}

120

121

.example .arrow-full {

122

display: block;

123

124

}

125

126

.example .arrow-full em {

127

128

}

129

130

.example .arrow-out {

131

display: block;

132

}

133

134

.example .arrow-out em {

135

136

}

137

138

.example .arrow-in {

139

display: block;

140

141

}

142

143

</style>

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

</ul>

160

</div>

161

162

163

164

165

166

167

168

169

170

171

172

173

174

</ul>

175

</div>

176

</div>

177

178

179

180

181

182

YUI().use('dd-constrain', 'sortable', function(Y) {

183

var list1 = new Y.Sortable({

184

container: '#list1',

185

nodes: 'li',

186

opacity: '.1'

187

});

188

189

var list2 = new Y.Sortable({

190

container: '#list2',

191

nodes: 'li',

192

opacity: '.1'

193

});

194

195

list1.join(list2, 'outer');

196

});

197

198

199

</script>

200

</div>

201

202

<p><strong>Note: When using an outer or inner joined list, you must pick a moveType of 'move' or 'copy', the default 'swap' won't give you the results you expect.</strong></p>

203

<p>This example assumes that you have seen the Multiple Sortable Lists - Full Join example and continues from there.</p>

204

205

<h3 id="setting-up-the-list">Setting Up the List</h3>

206

<p>First we need to create the HTML structure for the lists. Since <code>Sortable</code> uses <code>Y.DD.Delegate</code>, we need to set up the delegation containers (<code>#list1, #lists2</code>) and the list items (<code>li</code>).</p>

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

</ul>

223

</div>

224

225

226

227

228

229

230

231

232

233

234

235

236

237

</ul>

238

</div>

239

</div></pre>

240

241

242

<p>Now we give the lists some CSS to make them visible.</p>

243

244

<pre class="code prettyprint">#demo h4 {

245

margin: 10px auto;

246

width: 165px;

247

text-align: center;

248

}

249

#demo ul {

250

margin: 0 auto;

251

width: 165px;

252

padding: 0;

253

}

254

#demo li {

255

list-style-type: none;

256

padding: 3px;

257

width: 150px;

258

margin: 6px;

259

font-size: 114%;

260

-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

261

-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

262

box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);

263

cursor: move;

264

}

265

#demo li.one {

266

background-color: #B6BFDA;

267

border: 1px solid #7E869D;

268

}

269

#demo li.two {

270

background-color: #F2C89F;

271

border: 1px solid #B19C87;

272

text-align: center;

273

}</pre>

274

275

276

<h3 id="setting-up-the-yui-instance">Setting Up the YUI Instance</h3>

277

<p>Now we need to create our YUI instance and tell it to load the <code>sortable</code> module.</p>

278

<p>In this example we are also going to attach a <code>DD</code> plugin to the <code>Sortable</code> instances.</p>

279

280

<pre class="code prettyprint">YUI().use('dd-constrain', 'sortable'</pre>

281

282

283

<h3 id="making-the-lists-draggable">Making the Lists Draggable</h3>

284

<p>Now that we have a YUI instance with the <code>sortable</code> module, we need to instantiate a <code>Sortable</code> instance on each of the lists.</p>

285

286

<pre class="code prettyprint">YUI().use('dd-constrain', 'sortable', function(Y) {

287

var list1 = new Y.Sortable({

288

container: '#list1',

289

nodes: 'li',

290

opacity: '.1'

291

});

292

293

var list2 = new Y.Sortable({

294

container: '#list2',

295

nodes: 'li',

296

opacity: '.1'

297

});

298

299

});</pre>

300

301

302

<h3 id="applying-a-dd-plugin">Applying a DD Plugin</h3>

303

<p>Since <code>Sortable</code> uses <code>DD.Delegate</code>, there is a dd instance available after instantiation.</p>

304

<p>The <code>DD.Delegate</code> reference is found on the <code>.delegate</code> property of the <code>Sortable</code>.

305

This <code>DD.Delegate</code> instance has a <code>DD.Drag</code> instance bound to the <code>dd</code> property on the <code>DD.Delegate</code>

306

</p>

307

308

<pre class="code prettyprint">list1.delegate.dd.plug(Y.Plugin.DDConstrained, {

309

constrain2node: '#demo'

310

});

311

list2.delegate.dd.plug(Y.Plugin.DDConstrained, {

312

constrain2node: '#demo'

313

});</pre>

314

315

<p>Applying the <code>Plugin.DDConstrained</code> to the <code>Sortable</code> instance.</p>

316

317

<pre class="code prettyprint">YUI().use('dd-constrain', 'sortable', function(Y) {

318

var list1 = new Y.Sortable({

319

container: '#list1',

320

nodes: 'li',

321

opacity: '.1'

322

});

323

324

var list2 = new Y.Sortable({

325

container: '#list2',

326

nodes: 'li',

327

opacity: '.1'

328

});

329

330

list1.delegate.dd.plug(Y.Plugin.DDConstrained, {

331

constrain2node: '#demo'

332

});

333

list2.delegate.dd.plug(Y.Plugin.DDConstrained, {

334

constrain2node: '#demo'

335

});

336

337

});</pre>

338

339

340

341

<h3 id="joining-the-lists">Joining the Lists</h3>

342

<p>Joining the lists is as simple as calling the <code>join</code> method on one list passing in another list. By default, we use a full join which joins both lists both ways.</p>

343

<p>You can optionally specify the join type: <code>inner</code> or <code>outer</code>. The <code>moveType</code> can also be specified on the list: <code>swap</code>, <code>move</code> or <code>copy</code>. <code>swap</code> is the default, as seen in this example.</p>

344

345

346

list1.join(list2, 'outer'); //Outer join --> one way -->

347

list1.join(list2, 'inner'); //Inner join <-- one way <--</pre>

348

349

350

351

<h3 id="putting-it-together">Putting it together</h3>

352

353

<pre class="code prettyprint">YUI().use('dd-constrain', 'sortable', function(Y) {

354

var list1 = new Y.Sortable({

355

container: '#list1',

356

nodes: 'li',

357

opacity: '.1'

358

});

359

360

var list2 = new Y.Sortable({

361

container: '#list2',

362

nodes: 'li',

363

opacity: '.1'

364

});

365

366

list1.join(list2, 'outer');

367

});</pre>

368

369

</div>

370

</div>

371

</div>

372

373

374

375

376

377

378

<h2 class="no-toc">Table of Contents</h2>

379

</div>

380

381

382

383

<li>

384

<a href="#setting-up-the-list">Setting Up the List</a>

385

</li>

386

<li>

387

<a href="#setting-up-the-yui-instance">Setting Up the YUI Instance</a>

388

</li>

389

<li>

390

<a href="#making-the-lists-draggable">Making the Lists Draggable</a>

391

</li>

392

<li>

393

<a href="#applying-a-dd-plugin">Applying a DD Plugin</a>

394

</li>

395

<li>

396

<a href="#joining-the-lists">Joining the Lists</a>

397

</li>

398

<li>

399

<a href="#putting-it-together">Putting it together</a>

400

</li>

401

</ul>

402

</div>

403

</div>

404

405

406

407

408

409

<h2 class="no-toc">Examples</h2>

410

</div>

411

412

413

414

415

416

417

<a href="simple-sortable.html">Simple Sortable List</a>

418

</li>

419

420

421

422

423

<a href="sortable-float.html">Floated List</a>

424

</li>

425

426

427

428

429

<a href="sortable-multi.html">Multiple Lists</a>

430

</li>

431

432

433

434

435

<a href="sortable-multi-full.html">Multiple Lists - Full Join</a>

436

</li>

437

438

439

440

441

<a href="sortable-multi-out.html">Multiple Lists - Outer Join</a>

442

</li>

443

444

445

446

447

<a href="sortable-multi-in.html">Multiple Lists - Inner Join</a>

448

</li>

449

450

451

452

453

<a href="sortable-fish.html">Fish Sort - Multi Outer Join</a>

454

</li>

455

456

457

</ul>

458

</div>

459

</div>

460

461

462

463

</div>

464

</div>

465

</div>

466

</div>

467

468

469

470

471

</body>

472

</html>

Older »