What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element.

My goal is to allow users to drag either by the text or by using the blue arrows. It would also be acceptable if they could drag by clicking on the checkbox, as long as clicking still functions to check/uncheck it.

If dragging background images is not an option, how else could I achieve this desired behavior?

https://i.stack.imgur.com/HyAO6.png

This is the HTML code I have been employing:

<ul dnd-sortable-container [sortableData]="coordinateSystems" class="coordinateOptionsList">
    <li *ngFor="let coordOption of coordinateSystems; let i = index" dnd-sortable [sortableIndex]="i">
        <input type="checkbox" name="cbx{{coordOption.displayName}}" id="cbx{{coordOption.displayName}}" class="css-checkbox" [(ngModel)]="coordinateSystems[i].active">
        <label for="cbx{{coordOption.displayName}}" class="css-label-sortable">Use {{coordOption.displayName}} Coordinates</label>
        <br /><br />
        <div class="clear"></div>
    </li>
</ul>

And here is the CSS associated with it:

input[type=checkbox].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}

input[type=checkbox].css-checkbox + label.css-label-sortable {
    padding-left: 44px;
    height: 17px;
    display: inline-block;
    line-height: 19px;
    background-repeat: no-repeat;
    font-size: 15px;
    vertical-align: middle;
    cursor: pointer;
    float: left;
    margin: 10px 0 0 0;
    color: #666666;
}

input[type=checkbox].css-checkbox:checked + label.css-label-sortable {
    background-position: 0 0, 22px -17px;
}


label.css-label-sortable {
    background-image: url(../images/nud.png), url(../images/checkbox.svg);
    background-position: 0 0, 22px 0;
}

Answer №1

It would be great if the user could drag either the text itself or use the blue arrows to move it around. It's also fine if dragging works with the checkbox, as long as clicking still functions to check/uncheck it.

The issue lies with the library's .dnd-sortable-drag class. When applied, it scales down the li item causing complications with the draggable functionality. Essentially, when an element is scaled, dragging only works within the size of the scaled version which can be limiting.
To resolve this, adjust the transform value to match the original size:

.dnd-sortable-drag {    
    transform: scale(0.9); 
    opacity: 0.7;
    border: 1px dashed #000;
}

Update the transform value to scale(1);:

.dnd-sortable-drag {
    transform: scale(1); 
    opacity: 0.7;
    border: 1px dashed #000;
}

Check out the StackBlitz demo here

Answer №2

In order to enable dragging by the up and down image, you must designate it as the ul list-style-image. This will replace the standard list bullets with your desired image, making it draggable. To implement this in CSS, use the following code:

ul.css-ul-image-bullet {
    list-style-image: url(../images/nud.png);
} 

If this is not achieving the desired effect, please also provide the coordinateOptionsList CSS class so we can examine what is defined for the ul element.

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 a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

Angular 6 issue: There was an error attempting to differentiate '[object Object]'. Only arrays and iterables can be used

Could you please assist me in resolving this issue? ProfileComponent.html:4 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.D ...

JavaScript's failure to properly handle UTF-8 encoding

Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...

Retrieve the child element that is being clicked

Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...

Ensure that buttons appear neat and organized when viewed on mobile devices

As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views. In the desktop view, you can se ...

Is it possible to delete an element from an HTML form?

I'm facing an issue with removing an element from my HTML form during the loading process. The specific element in question is as follows: <input type="hidden" name="testToken" value="1000ad"></input> Here's what I've tried so ...

How can I access multiple icons using jQuery?

Below is the JavaScript code I am using: $(document).ready(function() { $.getJSON("Stations.php", function(jsonData){ $.each(jsonData, function(key,value) { $('#selectStation') .append($("<option></option>") ...

The quick and easy guide to effortlessly removing and adding classes using Angular's Renderer2

Is there a way to efficiently add and remove a class from an element with just two lines of code, instead of using multiple if-else statements? Have you tried this method? (It's not working for me though.) constructor(private renderer: Renderer2,priv ...

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

The individual blog pages on my site are not receiving the static files they need to display

I'm facing an issue serving a css file to individual blog posts on my website's blog section. Here's how it's supposed to work: Visit /blog- you'll see the main blog page, which is functioning fine. However, when trying to access ...

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

How can we direct the user to another tab in Angular Mat Tab using a child component?

Within my Angular page, I have implemented 4 tabs using mat-tab. Each tab contains a child component that encapsulates smaller components to cater to the specific functionality of that tab. Now, I am faced with the challenge of navigating the user from a ...

How can I apply max-width and max-height to a background image?

It seems like a simple task. I am currently transitioning my layout to become more fluid by working on creating scalable images. While using the img tag and setting max-width to 100% is effective, I am considering using a div with the image set as its bac ...

Tips for limiting the size of image uploads to under 2 megabytes

I am trying to implement an html select feature that allows users to upload images. <div class="row smallMargin"> <div class="col-sm-6"> Attach Image </div> <div class="col-sm-6"> <input type="file" ng-model="image" accept=" ...

Is there a way to customize the navbar layout so that link 1 is aligned to the right side, link 2 is centered, and link 3 is positioned on the right?

I attempted to utilize the flex property and justify content, but unfortunately that did not yield the desired result. I experimented with the code provided below. The goal is to create a website layout with a logo at the top and a navigation bar directly ...

Cross-Origin Resource Sharing (CORS) Issue: HTTP status is not okay. GoLang Mux API

When trying to perform HTTP requests using an Angular 17 App, I keep encountering the following response from the browser: Access to XMLHttpRequest at 'http://localhost:8082/login' from origin 'http://localhost:4200' has been blocked ...

The script ceased functioning immediately following the inclusion of a case-insensitive search feature and interactive images

In the process of creating my inaugural project featuring a collection of images, I wanted to include a filter/search bar at the top. This bar would dynamically filter the displayed pictures based on user input. For example, typing "Aatrox" into the search ...

Using a ternary condition within the ngClick directive

Trying to implement different functionalities based on the type of device. The setting tab is clickable, and in the desktop version, clicking should redirect to a default URL. However, on mobile devices, clicking the same link should open a modal window. ...