Using dojo.dnd.moveable in a fixed position setting

I have been attempting to use a Dojo moveable with a fixed position on the browser window. Unfortunately, whenever I try to move the div using the mouse, the position automatically changes to absolute. Is there a way to keep the div fixed in its position?

Here is the HTML code:

<html>
<body>

<div id="moveMe" style="position:fixed;width:100px;height:100px;border:1px solid black;background-color:#00ff00;cursor:pointer;">bla</div>
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</body>
</html>

And here is the script:

dojo.require("dojo.dnd.move");
dojo.ready(function(){

    var pcm = new dojo.dnd.move.boxConstrainedMoveable(dojo.byId("moveMe"), {
        box : dojo.window.getBox(),
        within : true
    });

});

If you want to test it out, you can click on this link: http://jsfiddle.net/zPVdX/

Thanks, krater

Answer №1

When it comes to positioning elements on a webpage, the browser uses two completely different methods: position: fixed and position: absolute.

For a better understanding of the distinctions between the two, I suggest taking a look at this resource: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

It's important to note that Dojo draggable sets elements to an absolute position, allowing for seamless movement using the top: and left: properties.

In contrast, static positioning keeps elements anchored relative to the current viewport.

If you provide more insight into your visual goals, there may be alternative solutions worth considering.

Answer №2

If you want to make your draggable element have a fixed position at the end of the drag action, you can utilize the event 'MoveStop' in your DND (draggable element) setup. By doing so, you can maintain the element's dragging capabilities with position: absolute; and then switch to a fixed position once the drag is completed.

Here is a simplified example in pseudo code:

yourDnd.on('MoveStop', function (e) {
    // Set position to FIXED
    domStyle.set(this.node, {
        'position': 'fixed',
    });
});

For more information on events, you can refer to the following link:

As for the workaround mentioned in this post, it is not recommended to modify the DOJO library as it may introduce potential issues and bugs in other parts of the framework.

Answer №3

After some trial and error, I finally got this to work using the following code:

        dnd.on('MoveStart', function (e) {
            var p = dojo.position(e.node, true);
            var parent_position = dojo.position(e.node.parentNode, true)

            dojo.style(e.node, "top", p.y - parent_position.y + "px");
            dojo.style(e.node, "position", "absolute");
        });
        dnd.on('MoveStop', function (e) {
            var p = dojo.position(e.node, false);
            dojo.style(e.node, "top", p.y + "px");
            dojo.style(e.node, "position", "fixed");
        });

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

Numerous occurrences of Setinterval

I am currently facing a minor issue with my code. My setup involves an auto-playing rotating fadeIn fadeOut slider, where clicking on a li will navigate to that 'slide' and pause the slider for a specific duration. The problem arises when a use ...

navigation bar directing to the wrong destination

My landing page has attached pages like landing/gothere and /another. The issue arises when I try to navigate from /another to landing/gothere. I fetch landing information using an API, but there's a delay when I click on the navbar link. The page loa ...

Enhance dynamically generated HTML using jQuery Mobile

Using jQuery Mobile version 1.2.0 I am dynamically generating HTML using JavaScript ($(selector).html(content)), adding it to the DOM, and then displaying it ($.mobile.changePage()). After that, I make an AJAX call, retrieve some data, and re-generate th ...

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

In the context of Express, how are "static" and "non-static" defined?

The Express documentation explains that the express.static() middleware is used to serve static files like images, CSS, and JavaScript. However, when serving a front-end React app using express.static("some_build_dir"), which includes JS files ...

The scaling of the slick carousel image is not working as expected

Having an issue with the Slick carousel where images are not resizing based on browser size (original size is 300x228px). Just to clarify: When I shrink the browser window, the number of slides decreases but the images remain the same size. I've bee ...

jQuery class does not apply correctly in IE9

Currently, I'm designing a menu for a WordPress theme and facing a styling issue. I aim to differentiate between menu items with submenus and those without by applying different styles on hover. Here's the jQuery code snippet I am using: $(docum ...

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

I am struggling to create a form with 3 input fields and a button on the same row using Bootstrap v4 for the design. Can anyone help me figure this out? Take a look at my current design: Click here My Code <div class="col-sm-7 mx-auto bg-faded"&g ...

What is the method to retrieve the value of a JSON object when the key matches the value of another JSON object?

Looking to expand my knowledge in javascript with an interesting challenge. Is there a way to retrieve the value of an object using another object's value as the key? For example: Obj1 = {"name":"John", "age":30, "car":null}; Obj2 = {"John":{"count ...

What is the best way to handle JSON data in vue.js?

I am facing an issue with vue.js. I want to create a settings page on the server program that has XML data. I believe it can be achieved by following these steps : server | parse XML to JSON client | get JSON and read JSON client | edit JSON client | ...

The next-auth/discord callbacks do not make any changes to the data

Currently, I am utilizing the next-auth/discord and facing an issue with the session callback not setting the user id to the session property as expected. [...nextauth].js import NextAuth from "next-auth/next"; import DiscordProvider from " ...

Error: The function scrollIntoView is invalid and cannot be found

I'm currently new to working with react-testing-library / jest and trying to create a test that checks if the route navigation (using react-router-dom) is functioning correctly. I've been following the guidance from the README as well as this hel ...

Strategies for Structuring Django and JavaScript Codebases

I'm grappling with the best way to structure my javascript and django code. Previously, I would include my page-specific javascript directly in the template file within a <script> tag. However, as my javascript code grew, this approach led to a ...

Moving a window in Pyqt5 using QtWebChannel

My goal is to enable the mousePressEvent and mouseMoveEvent events in order to move my app window using QtWebChannel. To achieve this, I am utilizing self.setWindowFlags(QtCore.Qt.FramelessWindowHint) to eliminate the default window flag and create a cust ...

Exploring CouchDB through Ajax to interact with a static website

Is it feasible for my HTML static website to interact with CouchDB using AJAX and retrieve the data without relying on server-side languages like PHP or Python? The CouchDB might be hosted on a different server/domain, so JSONP would need to be utilized. ...

Adjusting Bootstrap 4 Modal Transparency

Currently using Bootstrap 4 Beta and looking to darken the background when a Modal is displayed. I stumbled upon a solution suggesting the addition of a CSS class. .modal-backdrop.in { opacity: 0.5 !important; position: fixed; } The advice was no ...

Guide on implementing a live media stream using JavaScript

I am looking to set up a live audio stream from one device to a node server, which can then distribute that live feed to multiple front ends. After thorough research, I have hit a roadblock and hope someone out there can provide guidance. I have successf ...

Tips for recalling the active URL you just clicked on - is it in JavaScript or PHP?

I currently have an HTML select list menu in place. When a user selects an option, they are redirected to the corresponding page. For example, if they select "Faizabad" from the menu, they will be redirected to http://example.com/towns/Faizabad. The menu b ...

Troubleshooting TypeScript Modules in Visual Studio 2015 Update 2: Fixing the 'require' Undefined Error

While working in Visual Studio 2015 Enterprise with Update 2 installed, I decided to create a new TypeScript project called TypeScriptHTMLApp1 using the default template and settings. As part of this project, I added a new TypeScript file named log.ts and ...

Awaiting the mount to the Vue event bus

I am faced with a challenge involving a Map component that initializes leaflet on the DOM in the following manner: Map.vue <template> <div ref="map"/> </template> <script> import * as L from 'leaflet'; import mapEventB ...