~bcsaller/juju-gui/charmFind

<p>Now we need to create our YUI instance and tell it to load the <code>dd-drop</code>, <code>dd-plugin</code>, <code>dd-drop-plugin</code> and <code>anim</code> modules.</p>

<pre class="code prettyprint">YUI().use('dd-drop', 'anim', 'dd-plugin', 'dd-drop-plugin');</pre>

<h3 id="making-the-node-draggable">Making the Node draggable</h3>

<p>Now that we have a YUI instance with the modules loaded, we need to instantiate the <code>Drag</code> instance on this Node.</p>

<p>In this example we will be using Node plugins to accomplish our tasks.</p>

100

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

101

//Get the node #drag

102

var d = Y.one('#drag');

103

d.plug(Y.Plugin.Drag, { dragMode: 'intersect' });

104

});</pre>

105

106

107

<h3 id="animating-the-nodes">Animating the Nodes</h3>

108

<p>Now we will set up the Animation sequence that we want to run.</p>

109

110

<pre class="code prettyprint">//Get all the div's with the class anim

111

var anims = Y.Node.all('div.anim');

112

var counter = 0;

113

anims.each(function(v, k, items) {

114

//Get a reference to the Node instance

115

var a = v;

116

counter++;

117

//Add the FX plugin

118

a.plug(Y.Plugin.NodeFX);

119

//Add the Drop plugin

120

a.plug(Y.Plugin.Drop);

121

122

//Set the attributes on the animation

123

a.fx.setAttrs({

124

from: {

125

left: 0

126

127

to: {

128

curve: function() {

129

var points = [],

130

n = 10;

131

132

for (var i = 0; i < n; ++i) {

133

points.push([

134

Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')),

135

Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight'))

136

]);

137

}

138

return points;

139

}

140

141

//Do the animation 20 times

142

iterations: 20,

143

//Alternate it so it "bounces" across the screen

144

direction: 'alternate',

145

//Give all of them a different duration so we get different speeds.

146

duration: ((counter * 1.75) + 1)

147

});

148

});</pre>

149

150

151

<h3 id="making-the-node-a-target">Making the Node a Target</h3>

152

<p>Using the <code>dd-drop-plugin</code>, we now need to make this animated Node a Drop Target.</p>

153

<p>To do that, we need to add the plugin after the fx plugin.</p>

154

155

<pre class="code prettyprint">//Add the FX plugin

156

a.plug(Y.Plugin.NodeFX);

157

//Add the Drop plugin

158

a.plug(Y.Plugin.Drop);</pre>

159

160

161

<h3 id="syncing-the-target-with-the-animation">Syncing the Target with the Animation</h3>

162

<p>The Drop Target needs to be in sync with the animation, since we are changing the height, width, top and left style.</p>

163

<p>We do this by adding a listener to the <code>tween</code> event on the animation instance.</p>

164

165

<pre class="code prettyprint">//on tween of the original anim, we need to sync the drop's shim.

166

a.fx.on('tween', function() {

167

//Do we have an active Drag?

168

if (Y.DD.DDM.activeDrag) {

169

//Size this shim

170

this.drop.sizeShim();

171

//Force an over target check since we might not be moving the mouse.

172

Y.Lang.later(0, a, function() {

173

this.drop._handleTargetOver();

174

});

175

}

176

}, a);</pre>

177

178

179

<h3 id="full-example-source">Full example source</h3>

180

181

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

182

//Get the node #drag

183

var d = Y.one('#drag');

184

d.plug(Y.Plugin.Drag, { dragMode: 'intersect' });

185

186

//Get all the divs with the class anim

187

var anims = Y.Node.all('div.anim');

188

var counter = 0;

189

anims.each(function(v, k) {

190

//Get a reference to the Node instance

191

var a = v;

192

counter++;

193

//Add the FX plugin

194

a.plug(Y.Plugin.NodeFX);

195

//Add the Drop plugin

196

a.plug(Y.Plugin.Drop);

197

198

//Set the attributes on the animation

199

a.fx.setAttrs({

200

from: {

201

left: 0

202

203

to: {

204

curve: function() {

205

var points = [],

206

n = 10;

207

208

for (var i = 0; i < n; ++i) {

209

points.push([

210

Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get('offsetWidth')),

211

Math.floor(Math.random()*Y.DOM.winHeight() - a.get('offsetHeight'))

212

]);

213

}

214

return points;

215

}

216

217

//Do the animation 20 times

218

iterations: 20,

219

//Alternate it so it "bounces" across the screen

220

direction: 'alternate',

221

//Give all of them a different duration so we get different speeds.

222

duration: ((counter * 1.75) + 1)

223

});

224

225

//When this drop is entered, pause the fx

226

a.drop.on('drop:enter', function() {

227

this.fx.pause();

228

}, a);

229

//When the drop is exited, run the fx again

230

a.drop.on('drop:exit', function() {

231

this.fx.run();

232

}, a);

233

//When a drop is on the node, do something special

234

a.drop.on('drop:hit', function(e) {

235

//Stop the animation

236

this.fx.stop();

237

//remove the tween listener

238

this.fx.unsubscribeAll('tween');

239

//move it to the dock

240

this.fx.setAttrs({

241

from: {

242

opacity: 1

243

244

to: {

245

height: 50,

246

width: 50,

247

left: function() {

248

var dW = Y.one('body').get('viewportRegion').right;

249

return ((dW - 60)); //Minus 60 for the dock

250

251

top: 15,

252

opacity: .5

253

254

direction: 'normal',

255

iterations: 1,

256

duration: .5,

257

//We are using reverse above for the "bouncing", reset it here.

258

reverse: false

259

});

260

261

//On end, add a class and destroy the target

262

this.fx.on('end', function() {

263

this.drop.get('node').addClass('done');

264

this.drop.destroy();

265

}, this);

266

//Run this animation

267

this.fx.run();

268

269

//others that were dropped on.

270

Y.each(e.others, function(v, k) {

271

var node = v.get('node');

272

node.fx.run();

273

});

274

275

}, a);

276

277

//on tween of the original anim, we need to sync the drop's shim.

278

a.fx.on('tween', function() {

279

//Do we have an active Drag?

280

if (Y.DD.DDM.activeDrag) {

281

//Size this shim

282

this.drop.sizeShim();

283

//Force an over target check since we might not be moving the mouse.

284

Y.Lang.later(0, a, function() {

285

this.drop._handleTargetOver();

286

});

287

}

288

}, a);

289

290

a.fx.run();

291

});

292

});</pre>

293

294

</div>

295

</div>

296

</div>

297

298

299

300

301

302

303

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

304

</div>

305

306

307

308

<li>

309

<a href="#setting-up-the-html">Setting up the HTML</a>

310

</li>

311

<li>

312

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

313

</li>

314

<li>

315

<a href="#making-the-node-draggable">Making the Node draggable</a>

316

</li>

317

<li>

318

<a href="#animating-the-nodes">Animating the Nodes</a>

319

</li>

320

<li>

321

<a href="#making-the-node-a-target">Making the Node a Target</a>

322

</li>

323

<li>

324

<a href="#syncing-the-target-with-the-animation">Syncing the Target with the Animation</a>

325

</li>

326

<li>

327

<a href="#full-example-source">Full example source</a>

328

</li>

329

</ul>

330

</div>

331

</div>

332

333

334

335

336

337

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

338

</div>

339

340

341

342

343

344

345

<a href="simple-drag.html">Simple Drag</a>

346

</li>

347

348

349

350

351

<a href="drag-plugin.html">Drag - Node plugin</a>

352

</li>

353

354

355

356

357

<a href="proxy-drag.html">Drag - Proxy</a>

358

</li>

359

360

361

362

363

<a href="constrained-drag.html">Drag - Constrained to a Region</a>

364

</li>

365

366

367

368

369

<a href="groups-drag.html">Drag - Interaction Groups</a>

370

</li>

371

372

373

374

375

<a href="shim-drag.html">Using the Drag Shim</a>

376

</li>

377

378

379

380

381

<a href="drop-code.html">Using Drop Based Coding</a>

382

</li>

383

384

385

386

387

<a href="winscroll.html">Window Scrolling</a>

388

</li>

389

390

391

392

393

<a href="delegate.html">Drag Delegation</a>

394

</li>

395

396

397

398

399

<a href="delegate-drop.html">Drag Delegation with a Drop Target</a>

400

</li>

401

402

403

404

405

<a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>

406

</li>

407

408

409

410

411

<a href="list-drag.html">List Reorder w/Bubbling</a>

412

</li>

413

414

415

416

417

<a href="scroll-list.html">List Reorder w/Scrolling</a>

418

</li>

419

420

421

422

423

<a href="anim-drop.html">Animated Drop Targets</a>

424

</li>

425

426

427

428

429

<a href="photo-browser.html">Photo Browser</a>

430

</li>

431

432

433

434

435

<a href="portal-drag.html">Portal Style Example</a>

436

</li>

437

438

439

440

441

442

443

</ul>

444

</div>

445

</div>

446

447

448

449

450

451

<h2 class="no-toc">Examples That Use This Component</h2>

452

</div>

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

<a href="../yui/yui-multi.html">Multiple Instances</a>

492

</li>

493

494

495

496

497

<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>

498

</li>

499

500

501

</ul>

502

</div>

503

</div>

504

505

</div>

506

</div>

507

</div>

508

</div>

509

510

511

512

513

</body>

514

</html>

Older »