Linking the movement of a DIV element to specific object properties using knockoutjs

Question

Linking the movement of a DIV element to specific object properties using knockoutjs

I am currently working with an object that serves as a representation of the div element

function ElementVM
{
    var self = this;

    self.Height = ko.observable();
    self.Width = ko.observable();
    self.Bottom = ko.observable();
}

and I want to connect this object to

<div data-bind="style:{ height: Height, width: Width, bottom: Bottom, position: 'absolute' }">

However, my issue arises when dragging this div element which is set to be draggable as it does not update the values of my ElementVM object.

Have you encountered this problem before and do you have any insights on how the binding should be implemented?

Your assistance is greatly appreciated.

javascript jquery html css knockout.js

Answer 1

Answer №1

If you want to accomplish this task, custom bindings are the way to go. You can find an example below, or check it out on this jsfiddle.

// http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.draggable = {
     init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        var $element = $(element);
        var position = ko.unwrap(valueAccessor());
        if (position) {
            if (position.left) 
                $element.css({left:ko.unwrap(position.left)});
            if (position.top) 
                $element.css({top:ko.unwrap(position.top)});
            if (position.height) 
                $element.height(ko.unwrap(position.height));
            if (position.width) 
                $element.width(ko.unwrap(position.width));
        }
        var draggable = $element.draggable({
            stop: function(event,ui) {
                if (position) {
                    if (ko.isWritableObservable(position.left))
                       position.left(ui.position.left);
                    if (ko.isWritableObservable(position.top))
                       position.top(ui.position.top);
                    if (ko.isWritableObservable(position.height))
                       position.height($element.height());
                    if (ko.isWritableObservable(position.width))
                       position.width($element.width());
                }
            }
        });
    },
    update : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        var position = ko.unwrap(valueAccessor());
        var $element = $(element);
        if (position.left)
$element.css({left:ko.unwrap(position.left)+'px'});
        if (position.top)
$element.css({top:ko.unwrap(position.top)+'px'});
        if (position.height)
            $element.height(ko.unwrap(position.height));
        if (position.width)
            $element.width(ko.unwrap(position.width));
    }
};

var vm = {
    position: ko.observable({
    left: ko.observable(150),
    top: ko.observable(125),
    width: ko.observable(100),
    height: ko.observable(40)
    })
};

ko.applyBindings(vm);

div {
    border: solid 1px #444;
    background-color: #DDD;
    text-align: center;
    padding: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="draggable: position"
     style="position:absolute;">
    This is a draggable div
</div>
<ul>
    <li>Top: <input type="textbox" data-bind="value: position().top"/></li>
    <li>Left: <input type="textbox" data-bind="value: position().left"/></li>
    <li>Width: <input type="textbox" data-bind="value: position().width"/></li>
    <li>Height: <input type="textbox" data-bind="value: position().height"/></li>
</ul>
<pre data-bind="text:JSON.stringify(ko.toJS($root),null,2)"></pre>

Answer 2

If you want to accomplish this task, custom bindings are the way to go. You can find an example below, or check it out on this jsfiddle.

// http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.draggable = {
     init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        var $element = $(element);
        var position = ko.unwrap(valueAccessor());
        if (position) {
            if (position.left) 
                $element.css({left:ko.unwrap(position.left)});
            if (position.top) 
                $element.css({top:ko.unwrap(position.top)});
            if (position.height) 
                $element.height(ko.unwrap(position.height));
            if (position.width) 
                $element.width(ko.unwrap(position.width));
        }
        var draggable = $element.draggable({
            stop: function(event,ui) {
                if (position) {
                    if (ko.isWritableObservable(position.left))
                       position.left(ui.position.left);
                    if (ko.isWritableObservable(position.top))
                       position.top(ui.position.top);
                    if (ko.isWritableObservable(position.height))
                       position.height($element.height());
                    if (ko.isWritableObservable(position.width))
                       position.width($element.width());
                }
            }
        });
    },
    update : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        var position = ko.unwrap(valueAccessor());
        var $element = $(element);
        if (position.left)
$element.css({left:ko.unwrap(position.left)+'px'});
        if (position.top)
$element.css({top:ko.unwrap(position.top)+'px'});
        if (position.height)
            $element.height(ko.unwrap(position.height));
        if (position.width)
            $element.width(ko.unwrap(position.width));
    }
};

var vm = {
    position: ko.observable({
    left: ko.observable(150),
    top: ko.observable(125),
    width: ko.observable(100),
    height: ko.observable(40)
    })
};

ko.applyBindings(vm);

div {
    border: solid 1px #444;
    background-color: #DDD;
    text-align: center;
    padding: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="draggable: position"
     style="position:absolute;">
    This is a draggable div
</div>
<ul>
    <li>Top: <input type="textbox" data-bind="value: position().top"/></li>
    <li>Left: <input type="textbox" data-bind="value: position().left"/></li>
    <li>Width: <input type="textbox" data-bind="value: position().width"/></li>
    <li>Height: <input type="textbox" data-bind="value: position().height"/></li>
</ul>
<pre data-bind="text:JSON.stringify(ko.toJS($root),null,2)"></pre>

Answer 3

Answer №2

The knockout "style" binding operates in a one-way manner, detecting changes in the model and updating the corresponding view (such as an HTML element).

If you need to update model values based on changes in an HTML element, you must handle this through your own code. This could involve subscribing to window.resize events or periodically checking the size of the HTML element.

To achieve this functionality, consider using a custom binding or creating a component that handles the necessary interactions.

Answer 4

The knockout "style" binding operates in a one-way manner, detecting changes in the model and updating the corresponding view (such as an HTML element).

If you need to update model values based on changes in an HTML element, you must handle this through your own code. This could involve subscribing to window.resize events or periodically checking the size of the HTML element.

To achieve this functionality, consider using a custom binding or creating a component that handles the necessary interactions.

Linking the movement of a DIV element to specific object properties using knockoutjs

Answer №1

Answer №2

Similar questions

Passing predefined functions to asynchronous functions can be achieved by simply defining the

Using sinon.js version 1.10, jQuery version 2.1, and making synchronous requests

Using AJAX to send data with a POST request in Django may not function properly

Removing an item from an array in Mongoose

Step-by-step guide on generating a deb or exe file for an Angular Electron application

JQuery and Fancybox causing issues when triggered on Internet Explorer 8

Unexpected changes are observed in the size of DIV elements when adjusting the SVG viewBox

Combining JavaScript functions and Vue.js methods through chaining

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

What advantages does using immutablejs offer compared to using object.freeze?

Changing a particular field value within an array of objects in Angular 4

Tips for successfully submitting multiple forms to a controller

Convert a JavaScript array into an HTML table sorted by time

Is it possible to "deactivate" a jQuery action?

Any suggestions on the most effective method for translating command-line arguments into JSON format?

Encountering a runtime error in React while making an async call on a NextJS 13 page

What is the purpose of using translateY(-50%) to vertically center an element that is positioned at top: 50%?

Having trouble with managing state changes in a React application using Multiple Checkbox components from M

How can I disable scrolling for the :target selector?

Rails: Pagination for Comments within a Micropost