jQuery Implementation of Draggable Wish Wall Effect [ 附 demo 源码下载 ]

This example describes how to implement a draggable wish wall effect using jQuery. Shared for everyone's reference, as follows:

The running effect is as follows:

Here is a brief introduction to the features:

① Randomly displays background image or background color
② The position appears randomly
③ Can be moved by dragging

Alright, here is the code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"-8"/>
  <title>Wish Wall</title>
  <link rel="stylesheet" href="base.min.css"/>
  <style>
  #wish{height:650px;margin:20px;position:relative;width:960px;}
  .wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}
  .wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}
  </style>
</head>
<body>
  <ul id="wish">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
  </ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
  $('#wish').wish();
  $('.wish').draggable({containment:'#wish',scroll:false});
});
</script>

Note:

jqueryui needs to load draggable and scale Effect, draggable supports drag and drop, and scale Effect is the effect of clicking to close.

Click here for the complete example codeDownload on this site.

Readers who are interested in more about jQuery-related content can check the special topics on this site: 'Summary of jQuery Drag and Drop Effects and Techniques', 'Summary of jQuery Common Plugins and Usage', 'Summary of Ajax Usage in jQuery', 'Summary of jQuery Table (table) Operation Techniques', 'Summary of jQuery Extension Techniques', 'Summary of jQuery Classic Effects', 'Summary of jQuery Animation and Effect Usage', and 'Summary of jQuery Selector Usage'.

I hope the content described in this article will be helpful to everyone's jQuery programming.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial