jQuery Education Series Part #15: How to Add Draggable Fonts, Images and Box in jQuery Localhost Server? jQuery UI Part #1 | English Video Tutorial
What Will I Learn?
- You will learn how to create a draggable object (with draggable function) in this video.
- You will learn how to edit the image settings added via img command id on Style CSS.
- You will learn how to use the jQueryUI plugin library and how to specify the library source.
- You will learn how to write all the commands on the same Notepad++ page without adding an additional document.
Requirements
- jQuery 3.3.1.min.js
- jQueryUI 1.10.4 (full pack)
- jQuery-Ui.custom.js (for 1.6+ jQuery versions)
- MySQL 5.7.17 (full or developer mode)
- XAMPP Server Control Panel
- Notepad++
- A standard computer.
- A browser with JavaScript support.
Difficulty
- Intermediate
Description
Hello everyone, in this part of our jQuery Tutorial Serie, I teached you how to create a draggable fonts, images, boxes etc. on localhost server with using NotePad++ command line and using jQuery, HTML, CSS, jQueryUI Plugin 1.10.4 and JavaScript programming languages. I teached you how to use the "revert" command used with the "draggable" command. I also showed how to run the plugin we downloaded from jQueryUI site with script using jQuery on NotePad++ command line. Finally, I also gave you technical information about all codes and i showed you how to use all codes in this tutorial video.
Our education series, will progress from intermediate to advanced. All the programs described in the video (jQuery, FileZilla, Notepad++, XAMPP Server Control Panel, MySQL) are open source and are all included in the links section of the GitHub repositories. If you wish, you can access the web pages of these programs and download links for Windows from the links section.
Video Tutorial
Codes Used in This Video:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Sargoon Utopian jQuery Education Series</title>
<script type="text/javascript" src="js/jqueryseries.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.js"></script>
<style type="text/css">
.box {
height:400px;
width:400px;
revert:true;
background: none;
cursor:move;
border:8px solid black;
}
ul {
list-style:none;
cursor:move;
font-size:50px;
color:purple;
}
img {
width:150px;
height:150px;
margin:auto;
cursor:move;
}
</style>
</head>
<body>
<link type="text/css">
<div id="box" class="box"></div>
<div id="ul" class="ul"></div>
<img src="js/utopian.png" id="png">
<ul>
<li class="ul"> Utopian </li>
<li class="ul"> Sargoon </li>
<li class="ul"> jQuery </li>
</ul>
</body>
<script>
$(document).ready(function() {
$(".box").draggable();
$("img").draggable();
$('li').draggable({revert: false
});
});
</script>
Curriculum
1-9 education parts are posted in Turkish language
Links
- jQuery GitHub Repo
- MySQL GitHub Repo
- FileZilla GitHub Repo
- Notepad++ GitHub Repo
- jQuery Web Site
- jQuery (Windows) Download Link
- MySQL Web Site
- MySQL (For Windows) Download Link
- XAMPP Server Web Site
- XAMPP Server(For Windows) Download Link
- FileZilla Web Site
- FileZilla (Windows) Download Link
- Notepad++ Web Site
- Notepad++ (Win 64-bit) Download Link
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @sargoon I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x