Limiting the movement of items to specific divs with dnd-list in javascript/angular

I have been utilizing the 'Drag & Drop List' feature from .

Currently, any click and drag action on an <li> element will cause it to move by default.

Is there a method to limit this behavior so that the user must click on a specific sub-element of the <li> instead?

I have created a plunkr example (http://plnkr.co/edit/6mOkqRuY4aXY3NUE5W7F?p=preview) where each <li> contains two divs as follows:

   <ul dnd-list="models.lists.A">
    <li ng-repeat="item in models.lists.A"
        dnd-draggable="item"
        dnd-moved="models.lists.A.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}">
      <div class="theheader">A header</div>
      <div class="thebody">{{item.label}}</div>
    </li>
</ul>

I am interested in restricting the click and drag functionality to only work on the theheader div. If I click within the thebody div, I would like nothing to happen.

(The reason for this is because in my actual project, there are edit boxes within the <li>. When clicking on an edit box and dragging to select its contents, the entire <li> ends up moving, which is not ideal for user experience.)

javascriptangularjsdrag-and-drop

Answer №1

Just discovered the solution... It can be found in the github notes related to the project. To implement it, you need to include the attribute dnd-nodrag to a new div that surrounds the actual content. Additionally, add the attribute dnd-handle to theheader div as shown below:

<body class="simpleDemo" ng-controller="SimpleDemoController">
<ul dnd-list="models.lists.A">
    <li ng-repeat="item in models.lists.A"
        dnd-draggable="item"
        dnd-moved="models.lists.A.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}">
      <div dnd-nodrag>
        <div class="theheader" dnd-handle>A header</div>
        <div class="thebody">Body for {{item.label}}</div>
      </div>
    </li>
</ul>
</body>

Check out the Plunkr example here: http://plnkr.co/edit/TI1wjkkurrAVNAiutyU4?p=preview

By dragging on the blue header, you can now move the <li>; dragging anywhere else will have no effect...

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

How to assign the 'src' attribute to an HTML element using Node.js

I am currently using 'express' in Node.js and have implemented the following code to send a URL input into text: <form method="GET" action='/download' class="my-5"> <div class="form-group"> ...

javascripthtmlnode.jsexpressweb

Initiate monitoring for child component modifications

I'm looking to disable 'changeDetection' for the parent component while enabling it for the child component. Can you provide an example of how this can be achieved? The parent component contains static data, meaning change detection is not ...

javascriptangulartypescript

Angular UI modal does not have access to the parent scope

Utilizing Angular UI modal to implement a modal in my current project has been successful. However, I encountered an issue when trying to reference a variable in the parent scope. You can view the code on this Plunker link. It appears that the modal is u ...

angularjsangularjs-scopeangular-ui

Create a typescript class object

My journey with Typescript is just beginning as I delve into using it alongside Ionic. Coming from a background in Java, I'm finding the syntax and approach quite different and challenging. One area that's giving me trouble is creating new object ...

javascripttypescript

What is the best way to create a shell script using Node.js?

Currently, I am looking to utilize a shell script with NodeJs on my Windows platform to read a CSV file, perform processing via REST API call, and save the output in another CSV file. ...

javascriptnode.jsshell

Construct a table from JSON data

I am having trouble generating a table from JSON data. It seems like there may be an issue with my link, but there could be something else going on as well. I am not seeing any data displayed in my table and the error message I am getting is: Cannot read ...

javascripthtmljqueryjson

Retrieve configuration settings from a controller

https://i.sstatic.net/hUOcf.pngFor my current front end project, I am utilizing AngularJS. In order to load config values in the controller, I have tried using the standard import method. However, I keep encountering an error message: Uncaught Error: [$i ...

angularjs

Guide on building an API that, once authenticated through LinkedIn, provides access to a person's complete list of connections

I'm currently working on creating an application that uses LinkedIn for authentication. Upon successful authentication, the app will retrieve the connections of the user who authenticated. ...

javascriptnode.jslinkedin-api

When using JS, the open and close buttons function properly, however, the escape key always attempts to close the most recent modal

My buttons are working fine, but I'm having trouble getting the escape key to work with the correct modal. It keeps closing the last modal no matter how many I have. Even though thisModal seems to point to the right one for the buttons, it doesn&apos ...

javascript

Steering clear of using HTML tables to display company data

I am eager to enhance the way I present business data to my users. Currently, I am involved in developing a web application management system using MVC Razor .NET, Entity Framework, and Angular JS. One specific page requires displaying a significant amou ...

asp.net-mvcangularjsuser-experience

I am encountering an issue with the useRef function not properly detecting visibility

I'm looking to incorporate a fade-in animation into my React div as I scroll and reach a specific section. Unfortunately, the useEffect function that is supposed to detect the scrolling behavior seems to be malfunctioning and I can't figure out w ...

javascriptreactjs

I am currently utilizing a custom database connection class in node.js and ES6, however, the value being returned is showing as 'undefined'

Upon reviewing the other question, I realized that it may address a similar issue. However, I am struggling to apply the provided solution in his function `foo(){..}` to my specific problem, especially since his code is written in jQuery. Can someone pleas ...

javascriptmysqlnode.jsclassecmascript-6

Issue with applying Jquery toggleClass to an element

I'm encountering an issue with applying a toggleClass that is not working to add the new class. Can someone help me understand what's happening? <a href="#" id="cf_onclick">Click</a> <div id="main" class="invisible"> Hi there ...

javascriptjqueryhtmlcss

What is the best way to trigger a filter function that has been stored in a variable?

I need assistance with executing a filter function stored in a variable when the user clicks a button. The function enableFilter must compare item.id with item.category and trigger the filter if they match. Can someone provide guidance on how to achieve ...

javascripthtmlreactjs

How can we send state updates directly to a conditionally rendered React component?

I am currently developing a React application with a tab section that displays specific components upon clicking on a tab. Initially, I have my parent component: class Interface extends Component { constructor(props) { super(props); ...

javascriptreactjs

Router-view failing to display component

I am currently working on setting up basic routing in Vue. I have identified three file listings that seem to be causing issues. When I include <router-view> in app.vue, the foo component appears in the browser. However, when I follow the instruction ...

javascriptnode.jsvue.jsvue-router

A guide on inserting datalist items into a gridview with the help of JavaScript

I need a way to dynamically add items to a gridview when a link button within a datalist item is clicked, using JavaScript. Below is a C# example code snippet for reference: protected void DataList_itemCommand(object source, DataListCommandEventArgs e) ...

javascriptasp.netsql

Ways to guarantee that a function is executed only once within an object notation

Although there are numerous techniques available on Stack Overflow to ensure a function is only called once, none of them seem to fit my specific scenario and objectives. In this case, the function is nested within an object literal, and I aim to either ad ...

javascript

nextJS does not recognize the term 'Window'

I'm encountering the error "window is not defined" in my NextJS project. The variable isMobile determines whether the window size is less than 767.98 to handle the hamburger menu functionality. This code worked in ReactJS but seems to be causing issue ...

javascriptreactjsnext.js

Ways to refresh my $scope once new data is inserted into the SQL database

As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done: $http.get("retrieveData.php").then(function(response){ $scope.tasks = response.data.tasks; }) In addition, there is a functi ...

javascriptangularjs