I am having issues with the drag and drop directives in AngularJS - they work fine on my computer's navigator, but they

I have successfully implemented drag and drop directives in angularJS, and they are functioning properly on my computer's web browser. However, when I tried to use the directives on my touch devices, they did not work. Should I make adjustments to my code to ensure compatibility with touch devices, or do I need to rewrite the directives entirely? Below is a snippet of the code I am currently using.

module.exports = angular
  .module('app.dashboard.controller', ['ngTouch'])
  .controller('appDashboard', appDashboard)
  .directive('draggable', draggable)
  .directive('droppable', droppable);
function droppable() {
        return {
            scope: {
            drop: '&',
            bin: '='
        },
        link: function(scope, element) {
            // more code here
        }
        }
    }
function draggable() {
    return {
      scope: {
        drag: '&'
      },
      link: function(scope, element) {
    // more code here
      }
    }
  }

Answer №1

el.addEventListener(
            'touchend',
            function(e) {
                e.dataTransfer.dropEffect = 'move';
                // allows us to drop
                if (e.preventDefault) e.preventDefault();
                this.classList.add('over');
                return false;
            },
            false
        )

To incorporate touch functionality for dragging and dropping, you can utilize the touchstart, touchmove, and touchend events. Another option is to implement the drag and drop feature for touch devices using the Jquery UI library in combination with the touch Punch Library. For more information, refer to this link: implementing Drag and Drop for touch Devices

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to pass react-intl as an argument in a method of a React component during Jest testing, an error is thrown stating, "TypeError: intl.formatMessage is not a function."

Currently, I am in the process of unit testing my React component using Jest. Within this component, there are several methods that are called upon. As an example: export function fetchText(text, intl) => ((text !== 'NA') ? (intl.formatM ...

Transferring data from ng-init to <script> in AngularJS

Take a look at this code snippet: <div ng-init="companyData"> <script type="text/javascript"> window.timeline = new TL.Timeline('timeline-embed', sampleJson); </script> </div> Is there a method to include company ...

Is there a way to eliminate spaces from a string using react-native?

As a user of react-native, I've encountered an issue with inconsistent line breaks when inputting long strings on the screen. For example: https://i.sstatic.net/32RwW.jpg I aim to achieve consistent string wrapping as shown in the image below: htt ...

What is the best way to effectively adjust the code structure in a Node.JS project?

[Summarized] Focus on the bold parts. Although I am relatively new to Node.JS, I have been able to successfully build some projects. However, I have come across a burning question that has left me frustrated after searching Google for answers without much ...

The property or method 'startsWith' is not supported by this object

Regarding my webpack configuration: { "presets": [ ["env", { "targets": { "browsers": [">0.1%", "last 4 versions", "not ie <= 9"] } }] ] } However, I encountered a problem specifically in Internet Explorer: Ther ...

I must design a unique layout for my website

I am creating a webpage with various shapes and elements. However, I am facing a challenge with creating a shape that is commonly used. In platforms like Khan Academy, there is simulated programming where shapes can be easily created with a simple command ...

Angular and Bootstrap4: The Perfect Duo for Modals

I need to display a Bootstrap4 modal window in Angular when a specific condition is met in my "bookTour" method without the need for a direct button click. How can I achieve this? Below is the code snippet: html <div class="modal" id="myModal" [ngClass ...

The error message "TypeError: Trying to access properties of an undefined object (reading '800')" is being displayed

Every time I launch my application, I encounter the error message: "TypeError: Cannot read properties of undefined (reading '800')". import React, { useState } from 'react'; import { Menu, MenuItem, Avatar, Box, ThemeProvider} ...

The functionality of window.location.href seems to be malfunctioning on mobile devices within an ionic application

Attempting to open a view with a function call from the UI side <ion-option-button class="button-light icon ion-chatbubble" ng-click="openView('username')"></ion-option-button> The controller code for this action is as follows: $sc ...

How can Vue allow for text selection to be encapsulated within a span element with two-way binding for styling

I have developed an application that allows users to highlight text with different colors while reading. For this functionality, I am utilizing the Selection API. However, I am encountering issues with the two-way binding aspect. When a user changes the c ...

Easily send maps and directions straight to your mobile device with mapQuest

Currently creating a web application with mapQuest integration. I have two queries: 1) Is there a way to share routes from the web app to my phone? 2) How can I track my phone device and display the route on the web app? Appreciate any assistance. PS: Us ...

Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value? I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: <div class="small-box bg-green">, else < ...

What is the correct way to update the state of an object in ReactJS using Redux?

Hello, I am facing an issue with storing input field values in the state object named 'userInfo'. Here is what my code looks like: <TextField onChange={this.handleUserUsername.bind(this)} value={this.props.userInfo.username} /> ...

Challenges with loading elements in Protractor

I'm feeling a bit confused about Protractor at the moment. It seems like sometimes my elements load in time for the next action to happen, while other times they do not. I'm assuming this has something to do with its asynchronous nature. For ex ...

SecretKey is not valid, FirebaseError code: 400

Currently, my backend is powered by Firebase. However, when I initiate it using NODE_ENV=debug firebase emulators:start --inspect-functions, the following messages are displayed: emulators: Starting emulators: auth, functions, storage ⚠ functions: Ru ...

A more intelligent approach for generating JSON responses using Mysql

Here is the code I have on my server side using Node.js: var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'SOMEUSER', password: 'SOMEPASSWD', database: 'SOMED ...

Troubleshooting the Checkbox Oncheck Functionality

Before checking out the following code snippet, I have a requirement. Whenever a specific checkbox (identified by id cfc1) is clicked, it should not show as checked. I have implemented the onCheck function for this purpose, but I'm struggling to fig ...

My wish is for the animation to activate when hovering over an "a" element on the progress bar

Below is the HTML and CSS code: .collection-by-brand { position: relative; display: flex; width: 100%; height: auto; justify-content: space-around; flex-wrap: wrap; background: linear-gradient(to bottom, #ffffff, whitesmoke); margin-bo ...

One creative method for iterating through an array of objects and making modifications

Is there a more efficient way to achieve the same outcome? Brief Description: routes = [ { name: 'vehicle', activated: true}, { name: 'userassignment', activated: true}, { name: 'relations', activated: true}, { name: &apos ...

In a production environment, an ENOENT error in Next.js was triggered by fs.readdirSync

Utilizing the Next.js App Router, I attempted to retrieve all my markdown posts stored in files by scanning a directory using fs.readdirSync(). While everything worked flawlessly locally, upon deploying on Vercel, an unexpected issue arose. The code was e ...