Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

Question

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

I am a newcomer to knockout JavaScript and am currently utilizing Knockout drag and drop functionality in my project. Initially, I have two divisions - one is visible while the other has a display property set to none. During the drag enter function, I want to hide the first division and display the second division. However, upon dragging leaving, I need to hide the second division and show the first division again. The issue arises when the functionality of the second division changes during drag enter, but I do not wish to hide the second division until the drop event occurs. Any assistance in resolving this matter would be greatly appreciated.

It is important that no HTML is altered within the ".typeTextareaSection" block in the code.

You can view my fiddle Knockout Drag and Drop Fiddle

/** JavaScript ViewModel Code **/

 /* ViewModel Function */
function ViewModel(){
    var self = this;
    this.dropZones = ko.observableArray([{
        'elements' : ko.observableArray([])  // just for showcasing purposes
    }]);

   
    this.dragoverTextarea = function(e){
        console.log('dragOver');
        e.stopPropagation();
        e.preventDefault();
    }

    this.dropTextarea = function(e, data){
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            data.elements.push(f.name);
        }
        $('.typeTextarea').children('.typeTextareaSection').css('display', 'block');
$('.typeTextarea').children('#dragtimeTextarea').css('display', 'none');

    }

    this.dragenterTextarea = function(e, index){
        console.log('dragEnter');
              $('.typeTextarea').eq(index).children('.typeTextareaSection').css('display', 'none');
$('.typeTextarea').children('#dragtimeTextarea').css('display', 'block');
    }

    this.dragleaveTextarea = function(e, index){
        console.log('end');        
        $('.typeTextarea').children('.typeTextareaSection').css('display', 'block');
$('.typeTextarea').children('#dragtimeTextarea').css('display', 'none');
    }
}

// Applying Knockout bindings to the ViewModel
ko.applyBindings(new ViewModel());

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

/*HTML Markup*/
<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="typeTextarea" style="margin-top: 20px; height: 120px; border: 2px dashed #bbb; padding: 10px;" data-bind="event: {
        dragover: function (data, e) { $root.dragoverTextarea(e); },
        drop: function (data, e) { $root.dropTextarea(e, $data); },
        dragenter: function (data, e) { $root.dragenterTextarea(e, $index()); },
        dragleave: function (data, e) { $root.dragleaveTextarea(e, $index()); }
    }">
        /* Content of Type Textarea Division */
    </div>
</div>

jquery html css knockout.js

Answer 1

Answer №1

Your problem-solving strategy lacks structure.

The key concept to remember is that any time you make changes to the DOM from your viewmodel, it's a mistake. Your viewmodel should not be aware of the page layout, elements, CSS classes, or DOM events. The view should rely on the viewmodel, not vice versa.

The only appropriate place for DOM manipulation is within a binding. If there isn't a pre-existing binding that meets your needs, you can always create a custom one.

In this scenario, you want to encapsulate the action of dropping files onto an element. This action should have two outcomes:

Certain elements should display a reaction when hovered over
The dropped files should be placed into an observable array

These requirements define the interface of your binding:

An observable that stores either true or false based on hovering status
An observable to receive the dropped files

To achieve this, let's name the new binding filedrop, and here's how you would use it:

<div data-bind="filedrop: {hover: hovering, drop: files}"></div>

Where hovering and files are observables in your viewmodel. Here's how the binding could be implemented:

ko.bindingHandlers.filedrop = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();

        ko.utils.registerEventHandler(element, "dragenter", function (e) {
            if (ko.isWriteableObservable(options.hover)) options.hover(true);
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "dragleave", function (e) {
            if (ko.isWriteableObservable(options.hover)) options.hover(false);
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "dragover", function (e) {
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "drop", function (e) {
            if (ko.isWriteableObservable(options.drop)) {
                if (typeof options.drop.push === "function") {
                    options.drop.push.apply(options.drop, e.dataTransfer.files);
                } else {
                    options.drop(e.dataTransfer.files);
                }
            }
            if (ko.isWriteableObservable(options.hover)) options.hover(false);
            e.preventDefault();
        });
    }
};

You can simplify your viewmodel by creating a dedicated DropZone viewmodel containing the hovering and files observables as well as other related attributes:

function DropZone() {
    var self = this;
    self.text = ko.observable();
    self.files = ko.observableArray();
    self.hovering = ko.observable(false);
    self.filenames = ko.computed(function () {
        return ko.utils.arrayMap(self.files(), function (element) {
            return element.name;
        });
    });
}

Now your main view model accurately reflects a list of drop zones:

function ViewModel() {
    var self = this;
    self.dropZones = ko.observableArray([
        new DropZone()
    ]);
}

From here, constructing the view becomes straightforward:

<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="dropZone" data-bind="filedrop: { hover: hovering, drop: files }">
        <div class="textPane" data-bind="visible: !hovering()">
            <div class="buttonBar">
                <img src="Content/images/cancel27.png" alt="Cancel" title="Cancel" />
                <img src="Content/images/correctBox2.png" alt="Save" title="Save" />
            </div>
            <textarea maxlength="25000" data-bind="value: text" placeholder="Start typing here&hellip;"></textarea>
        </div>
        <div class="dropPane" data-bind="visible: hovering">Drop files here&hellip;</div>
    </div>
</div>

This approach results in:

A reusable custom binding
Viewmodels that only contain relevant data
A clean and sustainable setup overall

http://jsfiddle.net/kd7umbj4/2/

Answer 2

Your problem-solving strategy lacks structure.

The key concept to remember is that any time you make changes to the DOM from your viewmodel, it's a mistake. Your viewmodel should not be aware of the page layout, elements, CSS classes, or DOM events. The view should rely on the viewmodel, not vice versa.

The only appropriate place for DOM manipulation is within a binding. If there isn't a pre-existing binding that meets your needs, you can always create a custom one.

In this scenario, you want to encapsulate the action of dropping files onto an element. This action should have two outcomes:

Certain elements should display a reaction when hovered over
The dropped files should be placed into an observable array

These requirements define the interface of your binding:

An observable that stores either true or false based on hovering status
An observable to receive the dropped files

To achieve this, let's name the new binding filedrop, and here's how you would use it:

<div data-bind="filedrop: {hover: hovering, drop: files}"></div>

Where hovering and files are observables in your viewmodel. Here's how the binding could be implemented:

ko.bindingHandlers.filedrop = {
    init: function (element, valueAccessor) {
        var options = valueAccessor();

        ko.utils.registerEventHandler(element, "dragenter", function (e) {
            if (ko.isWriteableObservable(options.hover)) options.hover(true);
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "dragleave", function (e) {
            if (ko.isWriteableObservable(options.hover)) options.hover(false);
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "dragover", function (e) {
            e.preventDefault();
        });
        ko.utils.registerEventHandler(element, "drop", function (e) {
            if (ko.isWriteableObservable(options.drop)) {
                if (typeof options.drop.push === "function") {
                    options.drop.push.apply(options.drop, e.dataTransfer.files);
                } else {
                    options.drop(e.dataTransfer.files);
                }
            }
            if (ko.isWriteableObservable(options.hover)) options.hover(false);
            e.preventDefault();
        });
    }
};

You can simplify your viewmodel by creating a dedicated DropZone viewmodel containing the hovering and files observables as well as other related attributes:

function DropZone() {
    var self = this;
    self.text = ko.observable();
    self.files = ko.observableArray();
    self.hovering = ko.observable(false);
    self.filenames = ko.computed(function () {
        return ko.utils.arrayMap(self.files(), function (element) {
            return element.name;
        });
    });
}

Now your main view model accurately reflects a list of drop zones:

function ViewModel() {
    var self = this;
    self.dropZones = ko.observableArray([
        new DropZone()
    ]);
}

From here, constructing the view becomes straightforward:

<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="dropZone" data-bind="filedrop: { hover: hovering, drop: files }">
        <div class="textPane" data-bind="visible: !hovering()">
            <div class="buttonBar">
                <img src="Content/images/cancel27.png" alt="Cancel" title="Cancel" />
                <img src="Content/images/correctBox2.png" alt="Save" title="Save" />
            </div>
            <textarea maxlength="25000" data-bind="value: text" placeholder="Start typing here&hellip;"></textarea>
        </div>
        <div class="dropPane" data-bind="visible: hovering">Drop files here&hellip;</div>
    </div>
</div>

This approach results in:

A reusable custom binding
Viewmodels that only contain relevant data
A clean and sustainable setup overall

http://jsfiddle.net/kd7umbj4/2/

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

Answer №1

Similar questions

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Retrieve a specific element using BeautifulSoup

Including a CSS link in a .css file is an essential step in styling

Insert the current row into the table

Display partials with ajax in Rails 3/jquery tabs

Tips for designing a tabbed interface using HTML

Retrieve RadioButtonList Value using jQuery Function

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

jquery plugin causing issues with bootstrap button functionality

Angular JS modal form popup is a sleek and user-friendly feature that

Steps to store user input into an array and subsequently combine the stored input:

jquery mobile listview extension not functioning as expected

Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

Unpacking jQuery's fancybox collection

Embed a PHP function within an HTML tag using the echo statement

Vue calendar - The month display is condensed to only one row

apply a course to the designated element

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window