34k+
Yii v2 snippet guide
Revision #169 was created by 
rackycz on Jan 23, 2020, 7:48:42 PM.
jQuery draggable + touch-punch
Content
[...]
You can also minify [here](https://www.willpeavy.com/tools/minifier/) or [here](http://minifycode.com/html-minifier/) all your files. Adding "microdata" can help as well, but I have never used it. On the other hand what I do is that I compress images using these two sites [tinyjpg.com](https://tinyjpg.com/) and [tinypng.com](https://tinypng.com/).**Other useful links**
---
- [SVG to CSS-background-image convertor](https://websemantics.uk/tools/svg-to-background-image-conversion/)
**jQuery + draggable/droppable on mobile devices (Android)**
---
JQuery and its UI extension provide drag&drop functionalities, but these do not work on Android or generally on mobile devices. You can use one more dependency called [touch-punch](http://touchpunch.furf.com) to fix the problem. It should be loaded after jQuery and UI.
```
<!-- jQuery + UI -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- http://touchpunch.furf.com/ -->
<!-- Use this file locally -->
<script src="./jquery.ui.touch-punch.min.js"></script>
```
And then standard code should work:
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<!-- jQuery + UI -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- http://touchpunch.furf.com/ -->
<script src="./jquery.ui.touch-punch.min.js"></script>
<style>
.draggable {
width: 100px;
height: 100px;
border: 1px solid red;
}
.droppable {
width: 300px;
height: 300px;
border: 1px solid blue;
}
.over {
background-color: gold;
}
</style>
</head>
<body>
<div class="draggable my1">draggable my1</div>
<div class="draggable my2">draggable my2</div>
<div class="droppable myA">droppable myA</div>
<div class="droppable myB">droppable myB</div>
</body>
<script>
$( function() {
// All draggables will return to their original position if not dropped to correct droppable
// ... and will always stay in the area of BODY
$(".draggable").draggable({ revert: "invalid", containment: "body" });
// Demonstration of how particular droppables can accept only particular draggables
$( ".droppable.myA" ).droppable({
accept: ".draggable.my1",
drop: function( event, ui ) {
// positioning the dropped box into the target area
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
$(this).removeClass("over");
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
// Demonstration of how particular droppables can accept only particular draggables
$( ".droppable.myB" ).droppable({
accept: ".draggable.my2",
drop: function( event, ui ) {
// positioning the dropped box into the target area
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
$(this).removeClass("over");
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
});
</script>
</html>
```