Difference between #168 and #169 of
Yii v2 snippet guide

Revision #169 has been created by rackycz on Jan 23, 2020, 7:48:42 PM with the memo:

jQuery draggable + touch-punch
« previous (#168) next (#170) »

Changes

Title unchanged

Yii v2 snippet guide

Category unchanged

Tutorials

Yii version unchanged

2.0

Tags unchanged

tutorial,beginner,yii2

Content changed

[...]
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>
 
```
7 0
4 followers
Viewed: 258 035 times
Version: 2.0
Category: Tutorials
Tags: beginner, tutorial, yii2
Written by: rackycz
Last updated by: rackycz
Created on: Sep 19, 2019
Last updated: 6 months ago
Update Article
Revert to #168 | Revert to #169

Revisions

View all history