Interaction Helpers
$(selector).draggable({ option: value });
$(selector).droppable({ option: value });
$(selector).sortable({ option: value });Draggable
draggable interaction किसी element को ऐसी चीज़ में बदल देता है जिसे user mouse या touch से उठा और page पर move कर सकता है, बिना आपको यह खुद implement किए।
उदाहरण: Draggable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:80px;height:80px;background:lightblue">Drag me</div>
<script>
$("#box").draggable();
</script>
</body>
</html>Droppable
droppable interaction एक target area बनाता है जो draggable elements को accept करता है, और जब कोई compatible item इस पर drop हो तो यह एक callback चला सकता है।
उदाहरण: Droppable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="drop" style="width:150px;height:150px;border:2px dashed gray">Drop here</div>
<script>
$("#drop").droppable({
drop: function() { console.log("Item dropped"); }
});
</script>
</body>
</html>Resizable
resizable interaction users को किसी element के edges या corners को drag करके उसका size बदलने देता है, जो खासतौर पर panels, dialogs।
उदाहरण: Resizable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="box" style="width:100px;height:100px;border:1px solid black">Resize me</div>
<script>
$("#box").resizable();
</script>
</body>
</html>Selectable और Sortable
Selectable users को click करके और drag करके किसी group से कई items select करने देता है, desktop file browser में files select करने जैसा। Sortable users को।
उदाहरण: Selectable and Sortable
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li><li>Item 2</li></ul>
<script>
$("#list").selectable();
$("#list").sortable();
</script>
</body>
</html>एक छोटा Interaction Project
ये interactions combine होने पर काफ़ी ज़्यादा उपयोगी हो जाती हैं — एक draggable item जिसे किसी droppable target में drop किया जा सके, या एक sortable list।
उदाहरण: Small Interaction Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<div id="drag" style="width:60px;height:60px;background:lightgreen">Drag</div>
<div id="drop" style="width:150px;height:150px;border:2px dashed gray">Drop</div>
<script>
$("#drag").draggable();
$("#drop").droppable();
</script>
</body>
</html>position: staticवाले element पर.draggable()call करना और उम्मीद करना कि यह स्वतंत्र रूप से drag होगा, जबकि इसे positioning चाहिए (jQuery UIposition: relativeलगाता है, लेकिन layout surprise कर सकता है)।- बिना
dropcallback के किसी element को.droppable()बनाना, ताकि drop करने से कुछ visible न हो। - किसी element को
.resizable()बनाना लेकिन यह भूल जाना कि इसे एक size चाहिए और<img>या<textarea>को सही से resize होने के लिए एक wrapper चाहिए हो सकता है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: