/lib/style/common/jquery/jqueryui/development-bundle/docs/draggable.html - Annotate - Metacat - Ecoinformatics Redmine

5703

leinfelder

<ul class="UIAPIPlugin-toc">

3

<li><a href="#overview">Overview</a></li>

4

<li><a href="#options">Options</a></li>

5

<li><a href="#events">Events</a></li>

6

<li><a href="#methods">Methods</a></li>

7

<li><a href="#theming">Theming</a></li>

8

</ul>

9

<div class="UIAPIPlugin">

10

  <h1>jQuery UI Draggable</h1>

11

  <div id="overview">

12

    <h2 class="top-header">Overview</h2>

13

    <div id="overview-main">

14

        <p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>

15

<p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>

16

<p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>

17

<ul>

18

<li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>

19

<li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>

20

<li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>

21

</ul>

22

<p><br />

23

</p>

24

<p>To manipulate the position of a draggable during drag, you can either <a href="http://jsbin.com/etako/edit" class="external text" title="http://jsbin.com/etako/edit">use a wrapper as the draggable helper</a> and position the wrapped element with absolute positioning, or  you can correct internal values like so: <code>$(this).data('draggable').offset.click.top -= x</code>.</p>

25

    </div>

26

    <div id="overview-dependencies">

27

        <h3>Dependencies</h3>

28

        <ul>

29

<li>UI Core</li>

30

</ul>

31

    </div>

32

    <div id="overview-example">

33

        <h3>Example</h3>

34

        <div id="overview-example" class="example">

35

<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

36

<p><div id="demo" class="tabs-container" rel="170">

37

Initialize a draggable with default options.<br />

38

</p>

39

<pre>$(&quot;#draggable&quot;).draggable();

40

</pre>

41

<p></div><div id="source" class="tabs-container">

42

</p>

43

<pre>&lt;!DOCTYPE html&gt;

44

&lt;html&gt;

45

&lt;head&gt;

46

  &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;

47

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;

48

  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

49

  &lt;style type=&quot;text/css&quot;&gt;

50

    #draggable { width: 100px; height: 70px; background: silver; }

51

  &lt;/style&gt;

52

  &lt;script&gt;

53

  $(document).ready(function() {

54

    $(&quot;#draggable&quot;).draggable();

55

});

56

  &lt;/script&gt;

57

&lt;/head&gt;

58

&lt;body style="font-size:62.5%;"&gt;

59

60

&lt;div id=&quot;draggable&quot;&gt;Drag me&lt;/div&gt;

61

62

&lt;/body&gt;

63

&lt;/html&gt;

64

</pre>

65

<p></div>

66

</p><p></div>

67

    </div>

68

  </div>

69

  <div id="options">

70

    <h2 class="top-header">Options</h2>

71

    <ul class="options-list">

72

73

<li class="option" id="option-disabled">

74

  <div class="option-header">

75

    <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>

76

    <dl>

77

      <dt class="option-type-label">Type:</dt>

78

        <dd class="option-type">Boolean</dd>

79

80

      <dt class="option-default-label">Default:</dt>

81

        <dd class="option-default">false</dd>

82

83

    </dl>

84

  </div>

85

  <div class="option-description">

86

    <p>Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.</p>

87

  </div>

88

  <div class="option-examples">

89

    <h4>Code examples</h4>

90

    <dl class="option-examples-list">

91

92

<dt>

93

  Initialize a draggable with the <code>disabled</code> option specified.

94

</dt>

95

<dd>

96

<pre><code>$( ".selector" ).draggable({ disabled: true });</code></pre>

97

</dd>

98

99

100

<dt>

101

  Get or set the <code>disabled</code> option, after init.

102

</dt>

103

<dd>

104

<pre><code>//getter

105

var disabled = $( ".selector" ).draggable( "option", "disabled" );

106

//setter

107

$( ".selector" ).draggable( "option", "disabled", true );</code></pre>

108

</dd>

109

110

    </dl>

111

  </div>

112

</li>

113

114

115

<li class="option" id="option-addClasses">

116

  <div class="option-header">

117

    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>

118

    <dl>

119

      <dt class="option-type-label">Type:</dt>

120

        <dd class="option-type">Boolean</dd>

121

122

      <dt class="option-default-label">Default:</dt>

123

        <dd class="option-default">true</dd>

124

125

    </dl>

126

  </div>

127

  <div class="option-description">

128

    <p>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</p>

129

  </div>

130

  <div class="option-examples">

131

    <h4>Code examples</h4>

132

    <dl class="option-examples-list">

133

134

<dt>

135

  Initialize a draggable with the <code>addClasses</code> option specified.

136

</dt>

137

<dd>

138

<pre><code>$( ".selector" ).draggable({ addClasses: false });</code></pre>

139

</dd>

140

141

142

<dt>

143

  Get or set the <code>addClasses</code> option, after init.

144

</dt>

145

<dd>

146

<pre><code>//getter

147

var addClasses = $( ".selector" ).draggable( "option", "addClasses" );

148

//setter

149

$( ".selector" ).draggable( "option", "addClasses", false );</code></pre>

150

</dd>

151

152

    </dl>

153

  </div>

154

</li>

155

156

157

<li class="option" id="option-appendTo">

158

  <div class="option-header">

159

    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>

160

    <dl>

161

      <dt class="option-type-label">Type:</dt>

162

        <dd class="option-type">Element, Selector</dd>

163

164

      <dt class="option-default-label">Default:</dt>

165

        <dd class="option-default">'parent'</dd>

166

167

    </dl>

168

  </div>

169

  <div class="option-description">

170

    <p>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</p>

171

  </div>

172

  <div class="option-examples">

173

    <h4>Code examples</h4>

174

    <dl class="option-examples-list">

175

176

<dt>

177

  Initialize a draggable with the <code>appendTo</code> option specified.

178

</dt>

179

<dd>

180

<pre><code>$( ".selector" ).draggable({ appendTo: 'body' });</code></pre>

181

</dd>

182

183

184

<dt>

185

  Get or set the <code>appendTo</code> option, after init.

186

</dt>

187

<dd>

188

<pre><code>//getter

189

var appendTo = $( ".selector" ).draggable( "option", "appendTo" );

190

//setter

191

$( ".selector" ).draggable( "option", "appendTo", 'body' );</code></pre>

192

</dd>

193

194

    </dl>

195

  </div>

196

</li>

197

198

199

<li class="option" id="option-axis">

200

  <div class="option-header">

201

    <h3 class="option-name"><a href="#option-axis">axis</a></h3>

202

    <dl>

203

      <dt class="option-type-label">Type:</dt>

204

        <dd class="option-type">String</dd>

205

206

      <dt class="option-default-label">Default:</dt>

207

        <dd class="option-default">false</dd>

208

209

    </dl>

210

  </div>

211

  <div class="option-description">

212

    <p>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</p>

213

  </div>

214

  <div class="option-examples">

215

    <h4>Code examples</h4>

216

    <dl class="option-examples-list">

217

218

<dt>

219

  Initialize a draggable with the <code>axis</code> option specified.

220

</dt>

221

<dd>

222

<pre><code>$( ".selector" ).draggable({ axis: 'x' });</code></pre>

223

</dd>

224

225

226

<dt>

227

  Get or set the <code>axis</code> option, after init.

228

</dt>

229

<dd>

230

<pre><code>//getter

231

var axis = $( ".selector" ).draggable( "option", "axis" );

232

//setter

233

$( ".selector" ).draggable( "option", "axis", 'x' );</code></pre>

234

</dd>

235

236

    </dl>

237

  </div>

238

</li>

239

240

241

<li class="option" id="option-cancel">

242

  <div class="option-header">

243

    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>

244

    <dl>

245

      <dt class="option-type-label">Type:</dt>

246

        <dd class="option-type">Selector</dd>

247

248

      <dt class="option-default-label">Default:</dt>

249

        <dd class="option-default">':input,option'</dd>

250

251

    </dl>

252

  </div>

253

  <div class="option-description">

254

    <p>Prevents dragging from starting on specified elements.</p>

255

  </div>

256

  <div class="option-examples">

257

    <h4>Code examples</h4>

258

    <dl class="option-examples-list">

259

260

<dt>

261

  Initialize a draggable with the <code>cancel</code> option specified.

262

</dt>

263

<dd>

264

<pre><code>$( ".selector" ).draggable({ cancel: 'button' });</code></pre>

265

</dd>

266

267

268

<dt>

269

  Get or set the <code>cancel</code> option, after init.

270

</dt>

271

<dd>

272

<pre><code>//getter

273

var cancel = $( ".selector" ).draggable( "option", "cancel" );

274

//setter

275

$( ".selector" ).draggable( "option", "cancel", 'button' );</code></pre>

276

</dd>

277

278

    </dl>

279

  </div>

280

</li>

281

282

283

<li class="option" id="option-connectToSortable">

284

  <div class="option-header">

285

    <h3 class="option-name"><a href="#option-connectToSortable">connectToSortable</a></h3>

286

    <dl>

287

      <dt class="option-type-label">Type:</dt>

288

        <dd class="option-type">Selector</dd>

289

290

      <dt class="option-default-label">Default:</dt>

291

        <dd class="option-default">false</dd>

292

293

    </dl>

294

  </div>

295

  <div class="option-description">

296

    <p>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.

297

</p><p>Note: Specifying this option as an array of selectors has been removed.</p>

298

  </div>

299

  <div class="option-examples">

300

    <h4>Code examples</h4>

301

    <dl class="option-examples-list">

302

303

<dt>

304

  Initialize a draggable with the <code>connectToSortable</code> option specified.

305

</dt>

306

<dd>

307

<pre><code>$( ".selector" ).draggable({ connectToSortable: 'ul#myList' });</code></pre>

308

</dd>

309

310

311

<dt>

312

  Get or set the <code>connectToSortable</code> option, after init.

313

</dt>

314

<dd>

315

<pre><code>//getter

316

var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );

317

//setter

318

$( ".selector" ).draggable( "option", "connectToSortable", 'ul#myList' );</code></pre>

319

</dd>

320

321

    </dl>

322

  </div>

323

</li>

324

325

326

<li class="option" id="option-containment">

327

  <div class="option-header">

328

    <h3 class="option-name"><a href="#option-containment">containment</a></h3>

329

    <dl>

330

      <dt class="option-type-label">Type:</dt>

331

        <dd class="option-type">Selector, Element, String, Array</dd>

332

333

      <dt class="option-default-label">Default:</dt>

334

        <dd class="option-default">false</dd>

335

336

    </dl>

337

  </div>

338

  <div class="option-description">

339

    <p>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</p>

340

  </div>

341

  <div class="option-examples">

342

    <h4>Code examples</h4>

343

    <dl class="option-examples-list">

344

345

<dt>

346

  Initialize a draggable with the <code>containment</code> option specified.

347

</dt>

348

<dd>

349

<pre><code>$( ".selector" ).draggable({ containment: 'parent' });</code></pre>

350

</dd>

351

352

353

<dt>

354

  Get or set the <code>containment</code> option, after init.

355

</dt>

356

<dd>

357

<pre><code>//getter

358

var containment = $( ".selector" ).draggable( "option", "containment" );

359

//setter

360

$( ".selector" ).draggable( "option", "containment", 'parent' );</code></pre>

361

</dd>

362

363

    </dl>

364

  </div>

365

</li>

366

367

368

<li class="option" id="option-cursor">

369

  <div class="option-header">

370

    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>

371

    <dl>

372

      <dt class="option-type-label">Type:</dt>

373

        <dd class="option-type">String</dd>

374

375

      <dt class="option-default-label">Default:</dt>

376

        <dd class="option-default">'auto'</dd>

377

378

    </dl>

379

  </div>

380

  <div class="option-description">

381

    <p>The css cursor during the drag operation.</p>

382

  </div>

383

  <div class="option-examples">

384

    <h4>Code examples</h4>

385

    <dl class="option-examples-list">

386

387

<dt>

388

  Initialize a draggable with the <code>cursor</code> option specified.

389

</dt>

390

<dd>

391

<pre><code>$( ".selector" ).draggable({ cursor: 'crosshair' });</code></pre>

392

</dd>

393

394

395

<dt>

396

  Get or set the <code>cursor</code> option, after init.

397

</dt>

398

<dd>

399

<pre><code>//getter

400

var cursor = $( ".selector" ).draggable( "option", "cursor" );

401

//setter

402

$( ".selector" ).draggable( "option", "cursor", 'crosshair' );</code></pre>

403

</dd>

404

405

    </dl>

406

  </div>

407

</li>

408

409

410

<li class="option" id="option-cursorAt">

411

  <div class="option-header">

412

    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>

413

    <dl>

414

      <dt class="option-type-label">Type:</dt>

415

        <dd class="option-type">Object</dd>

416

417

      <dt class="option-default-label">Default:</dt>

418

        <dd class="option-default">false</dd>

419

420

    </dl>

421

  </div>

422

  <div class="option-description">

423

    <p>Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>

424

  </div>

425

  <div class="option-examples">

426

    <h4>Code examples</h4>

427

    <dl class="option-examples-list">

428

429

<dt>

430

  Initialize a draggable with the <code>cursorAt</code> option specified.

431

</dt>

432

<dd>

433

<pre><code>$( ".selector" ).draggable({ cursorAt: { left: 5 } });</code></pre>

434

</dd>

435

436

437

<dt>

438

  Get or set the <code>cursorAt</code> option, after init.

439

</dt>

440

<dd>

441

<pre><code>//getter

442

var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );

443

//setter

444

$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );</code></pre>

445

</dd>

446

447

    </dl>

448

  </div>

449

</li>

450

451

452

<li class="option" id="option-delay">

453

  <div class="option-header">

454

    <h3 class="option-name"><a href="#option-delay">delay</a></h3>

455

    <dl>

456

      <dt class="option-type-label">Type:</dt>

457

        <dd class="option-type">Integer</dd>

458

459

      <dt class="option-default-label">Default:</dt>

460

        <dd class="option-default">0</dd>

461

462

    </dl>

463

  </div>

464

  <div class="option-description">

465

    <p>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>

466

  </div>

467

  <div class="option-examples">

468

    <h4>Code examples</h4>

469

    <dl class="option-examples-list">

470

471

<dt>

472

  Initialize a draggable with the <code>delay</code> option specified.

473

</dt>

474

<dd>

475

<pre><code>$( ".selector" ).draggable({ delay: 500 });</code></pre>

476

</dd>

477

478

479

<dt>

480

  Get or set the <code>delay</code> option, after init.

481

</dt>

482

<dd>

483

<pre><code>//getter

484

var delay = $( ".selector" ).draggable( "option", "delay" );

485

//setter

486

$( ".selector" ).draggable( "option", "delay", 500 );</code></pre>

487

</dd>

488

489

    </dl>

490

  </div>

491

</li>

492

493

494

<li class="option" id="option-distance">

495

  <div class="option-header">

496

    <h3 class="option-name"><a href="#option-distance">distance</a></h3>

497

    <dl>

498

      <dt class="option-type-label">Type:</dt>

499

        <dd class="option-type">Integer</dd>

500

501

      <dt class="option-default-label">Default:</dt>

502

        <dd class="option-default">1</dd>

503

504

    </dl>

505

  </div>

506

  <div class="option-description">

507

    <p>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>

508

  </div>

509

  <div class="option-examples">

510

    <h4>Code examples</h4>

511

    <dl class="option-examples-list">

512

513

<dt>

514

  Initialize a draggable with the <code>distance</code> option specified.

515

</dt>

516

<dd>

517

<pre><code>$( ".selector" ).draggable({ distance: 30 });</code></pre>

518

</dd>

519

520

521

<dt>

522

  Get or set the <code>distance</code> option, after init.

523

</dt>

524

<dd>

525

<pre><code>//getter

526

var distance = $( ".selector" ).draggable( "option", "distance" );

527

//setter

528

$( ".selector" ).draggable( "option", "distance", 30 );</code></pre>

529

</dd>

530

531

    </dl>

532

  </div>

533

</li>

534

535

536

<li class="option" id="option-grid">

537

  <div class="option-header">

538

    <h3 class="option-name"><a href="#option-grid">grid</a></h3>

539

    <dl>

540

      <dt class="option-type-label">Type:</dt>

541

        <dd class="option-type">Array</dd>

542

543

      <dt class="option-default-label">Default:</dt>

544

        <dd class="option-default">false</dd>

545

546

    </dl>

547

  </div>

548

  <div class="option-description">

549

    <p>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</p>

550

  </div>

551

  <div class="option-examples">

552

    <h4>Code examples</h4>

553

    <dl class="option-examples-list">

554

555

<dt>

556

  Initialize a draggable with the <code>grid</code> option specified.

557

</dt>

558

<dd>

559

<pre><code>$( ".selector" ).draggable({ grid: [50, 20] });</code></pre>

560

</dd>

561

562

563

<dt>

564

  Get or set the <code>grid</code> option, after init.

565

</dt>

566

<dd>

567

<pre><code>//getter

568

var grid = $( ".selector" ).draggable( "option", "grid" );

569

//setter

570

$( ".selector" ).draggable( "option", "grid", [50, 20] );</code></pre>

571

</dd>

572

573

    </dl>

574

  </div>

575

</li>

576

577

578

<li class="option" id="option-handle">

579

  <div class="option-header">

580

    <h3 class="option-name"><a href="#option-handle">handle</a></h3>

581

    <dl>

582

      <dt class="option-type-label">Type:</dt>

583

        <dd class="option-type">Element, Selector</dd>

584

585

      <dt class="option-default-label">Default:</dt>

586

        <dd class="option-default">false</dd>

587

588

    </dl>

589

  </div>

590

  <div class="option-description">

591

    <p>If specified, restricts drag start click to the specified element(s).</p>

592

  </div>

593

  <div class="option-examples">

594

    <h4>Code examples</h4>

595

    <dl class="option-examples-list">

596

597

<dt>

598

  Initialize a draggable with the <code>handle</code> option specified.

599

</dt>

600

<dd>

601

<pre><code>$( ".selector" ).draggable({ handle: 'h2' });</code></pre>

602

</dd>

603

604

605

<dt>

606

  Get or set the <code>handle</code> option, after init.

607

</dt>

608

<dd>

609

<pre><code>//getter

610

var handle = $( ".selector" ).draggable( "option", "handle" );

611

//setter

612

$( ".selector" ).draggable( "option", "handle", 'h2' );</code></pre>

613

</dd>

614

615

    </dl>

616

  </div>

617

</li>

618

619

620

<li class="option" id="option-helper">

621

  <div class="option-header">

622

    <h3 class="option-name"><a href="#option-helper">helper</a></h3>

623

    <dl>

624

      <dt class="option-type-label">Type:</dt>

625

        <dd class="option-type">String, Function</dd>

626

627

      <dt class="option-default-label">Default:</dt>

628

        <dd class="option-default">'original'</dd>

629

630

    </dl>

631

  </div>

632

  <div class="option-description">

633

    <p>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</p>

634

  </div>

635

  <div class="option-examples">

636

    <h4>Code examples</h4>

637

    <dl class="option-examples-list">

638

639

<dt>

640

  Initialize a draggable with the <code>helper</code> option specified.

641

</dt>

642

<dd>

643

<pre><code>$( ".selector" ).draggable({ helper: 'clone' });</code></pre>

644

</dd>

645

646

647

<dt>

648

  Get or set the <code>helper</code> option, after init.

649

</dt>

650

<dd>

651

<pre><code>//getter

652

var helper = $( ".selector" ).draggable( "option", "helper" );

653

//setter

654

$( ".selector" ).draggable( "option", "helper", 'clone' );</code></pre>

655

</dd>

656

657

    </dl>

658

  </div>

659

</li>

660

661

662

<li class="option" id="option-iframeFix">

663

  <div class="option-header">

664

    <h3 class="option-name"><a href="#option-iframeFix">iframeFix</a></h3>

665

    <dl>

666

      <dt class="option-type-label">Type:</dt>

667

        <dd class="option-type">Boolean, Selector</dd>

668

669

      <dt class="option-default-label">Default:</dt>

670

        <dd class="option-default">false</dd>

671

672

    </dl>

673

  </div>

674

  <div class="option-description">

675

    <p>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</p>

676

  </div>

677

  <div class="option-examples">

678

    <h4>Code examples</h4>

679

    <dl class="option-examples-list">

680

681

<dt>

682

  Initialize a draggable with the <code>iframeFix</code> option specified.

683

</dt>

684

<dd>

685

<pre><code>$( ".selector" ).draggable({ iframeFix: true });</code></pre>

686

</dd>

687

688

689

<dt>

690

  Get or set the <code>iframeFix</code> option, after init.

691

</dt>

692

<dd>

693

<pre><code>//getter

694

var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );

695

//setter

696

$( ".selector" ).draggable( "option", "iframeFix", true );</code></pre>

697

</dd>

698

699

    </dl>

700

  </div>

701

</li>

702

703

704

<li class="option" id="option-opacity">

705

  <div class="option-header">

706

    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>

707

    <dl>

708

      <dt class="option-type-label">Type:</dt>

709

        <dd class="option-type">Float</dd>

710

711

      <dt class="option-default-label">Default:</dt>

712

        <dd class="option-default">false</dd>

713

714

    </dl>

715

  </div>

716

  <div class="option-description">

717

    <p>Opacity for the helper while being dragged.</p>

718

  </div>

719

  <div class="option-examples">

720

    <h4>Code examples</h4>

721

    <dl class="option-examples-list">

722

723

<dt>

724

  Initialize a draggable with the <code>opacity</code> option specified.

725

</dt>

726

<dd>

727

<pre><code>$( ".selector" ).draggable({ opacity: 0.35 });</code></pre>

728

</dd>

729

730

731

<dt>

732

  Get or set the <code>opacity</code> option, after init.

733

</dt>

734

<dd>

735

<pre><code>//getter

736

var opacity = $( ".selector" ).draggable( "option", "opacity" );

737

//setter

738

$( ".selector" ).draggable( "option", "opacity", 0.35 );</code></pre>

739

</dd>

740

741

    </dl>

742

  </div>

743

</li>

744

745

746

<li class="option" id="option-refreshPositions">

747

  <div class="option-header">

748

    <h3 class="option-name"><a href="#option-refreshPositions">refreshPositions</a></h3>

749

    <dl>

750

      <dt class="option-type-label">Type:</dt>

751

        <dd class="option-type">Boolean</dd>

752

753

      <dt class="option-default-label">Default:</dt>

754

        <dd class="option-default">false</dd>

755

756

    </dl>

757

  </div>

758

  <div class="option-description">

759

    <p>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</p>

760

  </div>

761

  <div class="option-examples">

762

    <h4>Code examples</h4>

763

    <dl class="option-examples-list">

764

765

<dt>

766

  Initialize a draggable with the <code>refreshPositions</code> option specified.

767

</dt>

768

<dd>

769

<pre><code>$( ".selector" ).draggable({ refreshPositions: true });</code></pre>

770

</dd>

771

772

773

<dt>

774

  Get or set the <code>refreshPositions</code> option, after init.

775

</dt>

776

<dd>

777

<pre><code>//getter

778

var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );

779

//setter

780

$( ".selector" ).draggable( "option", "refreshPositions", true );</code></pre>

781

</dd>

782

783

    </dl>

784

  </div>

785

</li>

786

787

788

<li class="option" id="option-revert">

789

  <div class="option-header">

790

    <h3 class="option-name"><a href="#option-revert">revert</a></h3>

791

    <dl>

792

      <dt class="option-type-label">Type:</dt>

793

        <dd class="option-type">Boolean, String</dd>

794

795

      <dt class="option-default-label">Default:</dt>

796

        <dd class="option-default">false</dd>

797

798

    </dl>

799

  </div>

800

  <div class="option-description">

801

    <p>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</p>

802

  </div>

803

  <div class="option-examples">

804

    <h4>Code examples</h4>

805

    <dl class="option-examples-list">

806

807

<dt>

808

  Initialize a draggable with the <code>revert</code> option specified.

809

</dt>

810

<dd>

811

<pre><code>$( ".selector" ).draggable({ revert: true });</code></pre>

812

</dd>

813

814

815

<dt>

816

  Get or set the <code>revert</code> option, after init.

817

</dt>

818

<dd>

819

<pre><code>//getter

820

var revert = $( ".selector" ).draggable( "option", "revert" );

821

//setter

822

$( ".selector" ).draggable( "option", "revert", true );</code></pre>

823

</dd>

824

825

    </dl>

826

  </div>

827

</li>

828

829

830

<li class="option" id="option-revertDuration">

831

  <div class="option-header">

832

    <h3 class="option-name"><a href="#option-revertDuration">revertDuration</a></h3>

833

    <dl>

834

      <dt class="option-type-label">Type:</dt>

835

        <dd class="option-type">Integer</dd>

836

837

      <dt class="option-default-label">Default:</dt>

838

        <dd class="option-default">500</dd>

839

840

    </dl>

841

  </div>

842

  <div class="option-description">

843

    <p>The duration of the revert animation, in milliseconds. Ignored if revert is false.</p>

844

  </div>

845

  <div class="option-examples">

846

    <h4>Code examples</h4>

847

    <dl class="option-examples-list">

848

849

<dt>

850

  Initialize a draggable with the <code>revertDuration</code> option specified.

851

</dt>

852

<dd>

853

<pre><code>$( ".selector" ).draggable({ revertDuration: 1000 });</code></pre>

854

</dd>

855

856

857

<dt>

858

  Get or set the <code>revertDuration</code> option, after init.

859

</dt>

860

<dd>

861

<pre><code>//getter

862

var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );

863

//setter

864

$( ".selector" ).draggable( "option", "revertDuration", 1000 );</code></pre>

865

</dd>

866

867

    </dl>

868

  </div>

869

</li>

870

871

872

<li class="option" id="option-scope">

873

  <div class="option-header">

874

    <h3 class="option-name"><a href="#option-scope">scope</a></h3>

875

    <dl>

876

      <dt class="option-type-label">Type:</dt>

877

        <dd class="option-type">String</dd>

878

879

      <dt class="option-default-label">Default:</dt>

880

        <dd class="option-default">'default'</dd>

881

882

    </dl>

883

  </div>

884

  <div class="option-description">

885

    <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</p>

886

  </div>

887

  <div class="option-examples">

888

    <h4>Code examples</h4>

889

    <dl class="option-examples-list">

890

891

<dt>

892

  Initialize a draggable with the <code>scope</code> option specified.

893

</dt>

894

<dd>

895

<pre><code>$( ".selector" ).draggable({ scope: 'tasks' });</code></pre>

896

</dd>

897

898

899

<dt>

900

  Get or set the <code>scope</code> option, after init.

901

</dt>

902

<dd>

903

<pre><code>//getter

904

var scope = $( ".selector" ).draggable( "option", "scope" );

905

//setter

906

$( ".selector" ).draggable( "option", "scope", 'tasks' );</code></pre>

907

</dd>

908

909

    </dl>

910

  </div>

911

</li>

912

913

914

<li class="option" id="option-scroll">

915

  <div class="option-header">

916

    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>

917

    <dl>

918

      <dt class="option-type-label">Type:</dt>

919

        <dd class="option-type">Boolean</dd>

920

921

      <dt class="option-default-label">Default:</dt>

922

        <dd class="option-default">true</dd>

923

924

    </dl>

925

  </div>

926

  <div class="option-description">

927

    <p>If set to true, container auto-scrolls while dragging.</p>

928

  </div>

929

  <div class="option-examples">

930

    <h4>Code examples</h4>

931

    <dl class="option-examples-list">

932

933

<dt>

934

  Initialize a draggable with the <code>scroll</code> option specified.

935

</dt>

936

<dd>

937

<pre><code>$( ".selector" ).draggable({ scroll: false });</code></pre>

938

</dd>

939

940

941

<dt>

942

  Get or set the <code>scroll</code> option, after init.

943

</dt>

944

<dd>

945

<pre><code>//getter

946

var scroll = $( ".selector" ).draggable( "option", "scroll" );

947

//setter

948

$( ".selector" ).draggable( "option", "scroll", false );</code></pre>

949

</dd>

950

951

    </dl>

952

  </div>

953

</li>

954

955

956

<li class="option" id="option-scrollSensitivity">

957

  <div class="option-header">

958

    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>

959

    <dl>

960

      <dt class="option-type-label">Type:</dt>

961

        <dd class="option-type">Integer</dd>

962

963

      <dt class="option-default-label">Default:</dt>

964

        <dd class="option-default">20</dd>

965

966

    </dl>

967

  </div>

968

  <div class="option-description">

969

    <p>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</p>

970

  </div>

971

  <div class="option-examples">

972

    <h4>Code examples</h4>

973

    <dl class="option-examples-list">

974

975

<dt>

976

  Initialize a draggable with the <code>scrollSensitivity</code> option specified.

977

</dt>

978

<dd>

979

<pre><code>$( ".selector" ).draggable({ scrollSensitivity: 40 });</code></pre>

980

</dd>

981

982

983

<dt>

984

  Get or set the <code>scrollSensitivity</code> option, after init.

985

</dt>

986

<dd>

987

<pre><code>//getter

988

var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );

989

//setter

990

$( ".selector" ).draggable( "option", "scrollSensitivity", 40 );</code></pre>

991

</dd>

992

993

    </dl>

994

  </div>

995

</li>

996

997

998

<li class="option" id="option-scrollSpeed">

999

  <div class="option-header">

1000

    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>

1001

    <dl>

1002

      <dt class="option-type-label">Type:</dt>

1003

        <dd class="option-type">Integer</dd>

1004

1005

      <dt class="option-default-label">Default:</dt>

1006

        <dd class="option-default">20</dd>

1007

1008

    </dl>

1009

  </div>

1010

  <div class="option-description">

1011

    <p>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</p>

1012

  </div>

1013

  <div class="option-examples">

1014

    <h4>Code examples</h4>

1015

    <dl class="option-examples-list">

1016

1017

<dt>

1018

  Initialize a draggable with the <code>scrollSpeed</code> option specified.

1019

</dt>

1020

<dd>

1021

<pre><code>$( ".selector" ).draggable({ scrollSpeed: 40 });</code></pre>

1022

</dd>

1023

1024

1025

<dt>

1026

  Get or set the <code>scrollSpeed</code> option, after init.

1027

</dt>

1028

<dd>

1029

<pre><code>//getter

1030

var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );

1031

//setter

1032

$( ".selector" ).draggable( "option", "scrollSpeed", 40 );</code></pre>

1033

</dd>

1034

1035

    </dl>

1036

  </div>

1037

</li>

1038

1039

1040

<li class="option" id="option-snap">

1041

  <div class="option-header">

1042

    <h3 class="option-name"><a href="#option-snap">snap</a></h3>

1043

    <dl>

1044

      <dt class="option-type-label">Type:</dt>

1045

        <dd class="option-type">Boolean, Selector</dd>

1046

1047

      <dt class="option-default-label">Default:</dt>

1048

        <dd class="option-default">false</dd>

1049

1050

    </dl>

1051

  </div>

1052

  <div class="option-description">

1053

    <p>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</p>

1054

  </div>

1055

  <div class="option-examples">

1056

    <h4>Code examples</h4>

1057

    <dl class="option-examples-list">

1058

1059

<dt>

1060

  Initialize a draggable with the <code>snap</code> option specified.

1061

</dt>

1062

<dd>

1063

<pre><code>$( ".selector" ).draggable({ snap: true });</code></pre>

1064

</dd>

1065

1066

1067

<dt>

1068

  Get or set the <code>snap</code> option, after init.

1069

</dt>

1070

<dd>

1071

<pre><code>//getter

1072

var snap = $( ".selector" ).draggable( "option", "snap" );

1073

//setter

1074

$( ".selector" ).draggable( "option", "snap", true );</code></pre>

1075

</dd>

1076

1077

    </dl>

1078

  </div>

1079

</li>

1080

1081

1082

<li class="option" id="option-snapMode">

1083

  <div class="option-header">

1084

    <h3 class="option-name"><a href="#option-snapMode">snapMode</a></h3>

1085

    <dl>

1086

      <dt class="option-type-label">Type:</dt>

1087

        <dd class="option-type">String</dd>

1088

1089

      <dt class="option-default-label">Default:</dt>

1090

        <dd class="option-default">'both'</dd>

1091

1092

    </dl>

1093

  </div>

1094

  <div class="option-description">

1095

    <p>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</p>

1096

  </div>

1097

  <div class="option-examples">

1098

    <h4>Code examples</h4>

1099

    <dl class="option-examples-list">

1100

1101

<dt>

1102

  Initialize a draggable with the <code>snapMode</code> option specified.

1103

</dt>

1104

<dd>

1105

<pre><code>$( ".selector" ).draggable({ snapMode: 'outer' });</code></pre>

1106

</dd>

1107

1108

1109

<dt>

1110

  Get or set the <code>snapMode</code> option, after init.

1111

</dt>

1112

<dd>

1113

<pre><code>//getter

1114

var snapMode = $( ".selector" ).draggable( "option", "snapMode" );

1115

//setter

1116

$( ".selector" ).draggable( "option", "snapMode", 'outer' );</code></pre>

1117

</dd>

1118

1119

    </dl>

1120

  </div>

1121

</li>

1122

1123

1124

<li class="option" id="option-snapTolerance">

1125

  <div class="option-header">

1126

    <h3 class="option-name"><a href="#option-snapTolerance">snapTolerance</a></h3>

1127

    <dl>

1128

      <dt class="option-type-label">Type:</dt>

1129

        <dd class="option-type">Integer</dd>

1130

1131

      <dt class="option-default-label">Default:</dt>

1132

        <dd class="option-default">20</dd>

1133

1134

    </dl>

1135

  </div>

1136

  <div class="option-description">

1137

    <p>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</p>

1138

  </div>

1139

  <div class="option-examples">

1140

    <h4>Code examples</h4>

1141

    <dl class="option-examples-list">

1142

1143

<dt>

1144

  Initialize a draggable with the <code>snapTolerance</code> option specified.

1145

</dt>

1146

<dd>

1147

<pre><code>$( ".selector" ).draggable({ snapTolerance: 40 });</code></pre>

1148

</dd>

1149

1150

1151

<dt>

1152

  Get or set the <code>snapTolerance</code> option, after init.

1153

</dt>

1154

<dd>

1155

<pre><code>//getter

1156

var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );

1157

//setter

1158

$( ".selector" ).draggable( "option", "snapTolerance", 40 );</code></pre>

1159

</dd>

1160

1161

    </dl>

1162

  </div>

1163

</li>

1164

1165

1166

<li class="option" id="option-stack">

1167

  <div class="option-header">

1168

    <h3 class="option-name"><a href="#option-stack">stack</a></h3>

1169

    <dl>

1170

      <dt class="option-type-label">Type:</dt>

1171

        <dd class="option-type">Selector</dd>

1172

1173

      <dt class="option-default-label">Default:</dt>

1174

        <dd class="option-default">false</dd>

1175

1176

    </dl>

1177

  </div>

1178

  <div class="option-description">

1179

    <p>Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.</p>

1180

  </div>

1181

  <div class="option-examples">

1182

    <h4>Code examples</h4>

1183

    <dl class="option-examples-list">

1184

1185

<dt>

1186

  Initialize a draggable with the <code>stack</code> option specified.

1187

</dt>

1188

<dd>

1189

<pre><code>$( ".selector" ).draggable({ stack: &quot;.products&quot; });</code></pre>

1190

</dd>

1191

1192

1193

<dt>

1194

  Get or set the <code>stack</code> option, after init.

1195

</dt>

1196

<dd>

1197

<pre><code>//getter

1198

var stack = $( ".selector" ).draggable( "option", "stack" );

1199

//setter

1200

$( ".selector" ).draggable( "option", "stack", &quot;.products&quot; );</code></pre>

1201

</dd>

1202

1203

    </dl>

1204

  </div>

1205

</li>

1206

1207

1208

<li class="option" id="option-zIndex">

1209

  <div class="option-header">

1210

    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>

1211

    <dl>

1212

      <dt class="option-type-label">Type:</dt>

1213

        <dd class="option-type">Integer</dd>

1214

1215

      <dt class="option-default-label">Default:</dt>

1216

        <dd class="option-default">false</dd>

1217

1218

    </dl>

1219

  </div>

1220

  <div class="option-description">

1221

    <p>z-index for the helper while being dragged.</p>

1222

  </div>

1223

  <div class="option-examples">

1224

    <h4>Code examples</h4>

1225

    <dl class="option-examples-list">

1226

1227

<dt>

1228

  Initialize a draggable with the <code>zIndex</code> option specified.

1229

</dt>

1230

<dd>

1231

<pre><code>$( ".selector" ).draggable({ zIndex: 2700 });</code></pre>

1232

</dd>

1233

1234

1235

<dt>

1236

  Get or set the <code>zIndex</code> option, after init.

1237

</dt>

1238

<dd>

1239

<pre><code>//getter

1240

var zIndex = $( ".selector" ).draggable( "option", "zIndex" );

1241

//setter

1242

$( ".selector" ).draggable( "option", "zIndex", 2700 );</code></pre>

1243

</dd>

1244

1245

    </dl>

1246

  </div>

1247

</li>

1248

1249

    </ul>

1250

  </div>

1251

  <div id="events">

1252

    <h2 class="top-header">Events</h2>

1253

    <ul class="events-list">

1254

1255

<li class="event" id="event-start">

1256

  <div class="event-header">

1257

    <h3 class="event-name"><a href="#event-start">start</a></h3>

1258

    <dl>

1259

      <dt class="event-type-label">Type:</dt>

1260

        <dd class="event-type">dragstart</dd>

1261

    </dl>

1262

  </div>

1263

  <div class="event-description">

1264

    <p>This event is triggered when dragging starts.</p>

1265

  </div>

1266

  <div class="event-examples">

1267

    <h4>Code examples</h4>

1268

    <dl class="event-examples-list">

1269

1270

<dt>

1271

  Supply a callback function to handle the <code>start</code> event as an init option.

1272

</dt>

1273

<dd>

1274

<pre><code>$( &quot;.selector&quot; ).draggable({

1275

   start: function(event, ui) { ... }

1276

});</code></pre>

1277

</dd>

1278

1279

1280

<dt>

1281

  Bind to the <code>start</code> event by type: <code>dragstart</code>.

1282

</dt>

1283

<dd>

1284

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstart&quot;, function(event, ui) {

1285

...

1286

});</code></pre>

1287

</dd>

1288

1289

    </dl>

1290

  </div>

1291

</li>

1292

1293

1294

<li class="event" id="event-drag">

1295

  <div class="event-header">

1296

    <h3 class="event-name"><a href="#event-drag">drag</a></h3>

1297

    <dl>

1298

      <dt class="event-type-label">Type:</dt>

1299

        <dd class="event-type">drag</dd>

1300

    </dl>

1301

  </div>

1302

  <div class="event-description">

1303

    <p>This event is triggered when the mouse is moved during the dragging.</p>

1304

  </div>

1305

  <div class="event-examples">

1306

    <h4>Code examples</h4>

1307

    <dl class="event-examples-list">

1308

1309

<dt>

1310

  Supply a callback function to handle the <code>drag</code> event as an init option.

1311

</dt>

1312

<dd>

1313

<pre><code>$( &quot;.selector&quot; ).draggable({

1314

   drag: function(event, ui) { ... }

1315

});</code></pre>

1316

</dd>

1317

1318

1319

<dt>

1320

  Bind to the <code>drag</code> event by type: <code>drag</code>.

1321

</dt>

1322

<dd>

1323

<pre><code>$( &quot;.selector&quot; ).bind( &quot;drag&quot;, function(event, ui) {

1324

...

1325

});</code></pre>

1326

</dd>

1327

1328

    </dl>

1329

  </div>

1330

</li>

1331

1332

1333

<li class="event" id="event-stop">

1334

  <div class="event-header">

1335

    <h3 class="event-name"><a href="#event-stop">stop</a></h3>

1336

    <dl>

1337

      <dt class="event-type-label">Type:</dt>

1338

        <dd class="event-type">dragstop</dd>

1339

    </dl>

1340

  </div>

1341

  <div class="event-description">

1342

    <p>This event is triggered when dragging stops.</p>

1343

  </div>

1344

  <div class="event-examples">

1345

    <h4>Code examples</h4>

1346

    <dl class="event-examples-list">

1347

1348

<dt>

1349

  Supply a callback function to handle the <code>stop</code> event as an init option.

1350

</dt>

1351

<dd>

1352

<pre><code>$( &quot;.selector&quot; ).draggable({

1353

   stop: function(event, ui) { ... }

1354

});</code></pre>

1355

</dd>

1356

1357

1358

<dt>

1359

  Bind to the <code>stop</code> event by type: <code>dragstop</code>.

1360

</dt>

1361

<dd>

1362

<pre><code>$( &quot;.selector&quot; ).bind( &quot;dragstop&quot;, function(event, ui) {

1363

...

1364

});</code></pre>

1365

</dd>

1366

1367

    </dl>

1368

  </div>

1369

</li>

1370

1371

    </ul>

1372

  </div>

1373

  <div id="methods">

1374

    <h2 class="top-header">Methods</h2>

1375

    <ul class="methods-list">

1376

1377

<li class="method" id="method-destroy">

1378

  <div class="method-header">

1379

    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>

1380

    <dl>

1381

      <dt class="method-signature-label">Signature:</dt>

1382

        <dd class="method-signature">.draggable( "destroy"

)</dd>

1391

    </dl>

1392

  </div>

1393

  <div class="method-description">

1394

    <p>Remove the draggable functionality completely. This will return the element back to its pre-init state.</p>

1395

  </div>

1396

</li>

1397

1398

1399

<li class="method" id="method-disable">

1400

  <div class="method-header">

1401

    <h3 class="method-name"><a href="#method-disable">disable</a></h3>

1402

    <dl>

1403

      <dt class="method-signature-label">Signature:</dt>

1404

        <dd class="method-signature">.draggable( "disable"

)</dd>

1413

    </dl>

1414

  </div>

1415

  <div class="method-description">

1416

    <p>Disable the draggable.</p>

1417

  </div>

1418

</li>

1419

1420

1421

<li class="method" id="method-enable">

1422

  <div class="method-header">

1423

    <h3 class="method-name"><a href="#method-enable">enable</a></h3>

1424

    <dl>

1425

      <dt class="method-signature-label">Signature:</dt>

1426

        <dd class="method-signature">.draggable( "enable"

)</dd>

1435

    </dl>

1436

  </div>

1437

  <div class="method-description">

1438

    <p>Enable the draggable.</p>

1439

  </div>

1440

</li>

1441

1442

1443

<li class="method" id="method-option">

1444

  <div class="method-header">

1445

    <h3 class="method-name"><a href="#method-option">option</a></h3>

1446

    <dl>

1447

      <dt class="method-signature-label">Signature:</dt>

1448

        <dd class="method-signature">.draggable( "option"

1449

1450

, optionName

1451

1452

, <span class="optional">[</span>value<span class="optional">] </span>

)</dd>

1457

    </dl>

1458

  </div>

1459

  <div class="method-description">

1460

    <p>Get or set any draggable option. If no value is specified, will act as a getter.</p>

1461

  </div>

1462

</li>

1463

1464

1465

<li class="method" id="method-option">

1466

  <div class="method-header">

1467

    <h3 class="method-name"><a href="#method-option">option</a></h3>

1468

    <dl>

1469

      <dt class="method-signature-label">Signature:</dt>

1470

        <dd class="method-signature">.draggable( "option"

1471

1472

, options

)</dd>

1479

    </dl>

1480

  </div>

1481

  <div class="method-description">

1482

    <p>Set multiple draggable options at once by providing an options object.</p>

1483

  </div>

1484

</li>

1485

1486

1487

<li class="method" id="method-widget">

1488

  <div class="method-header">

1489

    <h3 class="method-name"><a href="#method-widget">widget</a></h3>

1490

    <dl>

1491

      <dt class="method-signature-label">Signature:</dt>

1492

        <dd class="method-signature">.draggable( "widget"

)</dd>

1501

    </dl>

1502

  </div>

1503

  <div class="method-description">

1504

    <p>Returns the .ui-draggable element.</p>

1505

  </div>

1506

</li>

1507

1508

1509

    </ul>

1510

  </div>

1511

  <div id="theming">

1512

    <h2 class="top-header">Theming</h2>

1513

    <p>The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

1514

</p>

1515

  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.

1516

</p>

1517

1518

  <h3>Sample markup with jQuery UI CSS Framework classes</h3>

1519

  &lt;div class=&quot;<strong>ui-draggable</strong>&quot;&gt;&lt;/div&gt;

1520

  <p class="theme-note">

1521

    <strong>

1522

      Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.

1523

    </strong>

1524

  </p>

1525

1526

  </div>

1527

</div>

1528

1529

</p><!--

1530

Pre-expand include size: 59871 bytes

1531

Post-expand include size: 104835 bytes

1532

Template argument size: 58134 bytes

1533

Maximum: 2097152 bytes

1534

-->

1535

1536

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3768-1!1!0!!en!2 and timestamp 20101025163023 -->

Project

General

Profile

Metacat

Project

General

Profile

Metacat

metacat/lib/style/common/jquery/jqueryui/development-bundle/docs/draggable.html @ 6138