TouchPunchExperiment

Developer
Kyle Mickey
Size
2,215 Kb
Views
12,144
  1. TouchPunchExperiment Previews
  2. TouchPunchExperiment HTML Codes
  3. TouchPunchExperiment CSS Codes
  4. TouchPunchExperiment JS Codes

How do I make an touchpunchexperiment?

What is a touchpunchexperiment? How do you make a touchpunchexperiment? This script and codes were developed by Kyle Mickey on 02 October 2022, Sunday.

TouchPunchExperiment Previews
IQ Test

TouchPunchExperiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TouchPunchExperiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="sortable"> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 1 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 2 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 3 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 4 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 5 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 6 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 7 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 8 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 9 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 10 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 11 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 12 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 13 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 14 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 15 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 16 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 17 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 18 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 19 </div> <div class="remove">X</div> </li> <li class="draggable"> <div class="drag"> Draggable </div> <div class="data"> Data: Original Position 20 </div> <div class="remove">X</div> </li>
</ul> <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

TouchPunchExperiment - Script Codes CSS Codes

ul { list-style-type: none; height: 15em; overflow-y: scroll; width: 75%; padding: 1em; background-color: #e3e3e3;
}
.draggable { margin: .5em; padding: 0.2em; background-color: #eee; width: 65%;
}
.draggable div { display: inline;
}
.draggable .drag { width: 5em; background-color: #ccc;
}
.draggable .drag:hover { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;
}
.draggable .remove { height: 100%; float: right; width: 2em;
}

TouchPunchExperiment - Script Codes JS Codes

jQuery(function($) { $('.sortable').sortable({ handle: '.drag', delay: 150, opacity: .7, update: function (event, ui) { var $this = ui.item, $data = $this.find('.data'), $newPos = $data.find('.newPos'); if ($newPos.length === 0) { var $new = $('<div />', { 'class': 'newPos' }); $data.append($new); $newPos = $data.find('.newPos'); } $newPos.html(', New Position ' + ($this.index() + 1)); } });
});
TouchPunchExperiment - Script Codes
TouchPunchExperiment - Script Codes
Home Page Home
Developer Kyle Mickey
Username KDMickey
Uploaded October 02, 2022
Rating 3
Size 2,215 Kb
Views 12,144
Do you need developer help for TouchPunchExperiment?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Mickey (KDMickey) Script Codes
Name
Foundation Play
HelpAFriend
A Pen by Kyle Mickey
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!