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

Create a TypeScript view component that encapsulates an HTMLElement for seamless integration with TweenMax

How to access a particular tab in Bootstrap 5 using an external link

Tips for expanding the contentedible HTML element downwards within its container

Is there a way to automatically trigger an Anthem.NET button click event upon page load in ASP.NET?

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Is there a way to spin the picture but keep the container still?

I have combed through numerous discussions regarding the use of jQuery's :visible selector, specifically interested in any instances where conflicts arise when a <label for=""> element is present

phperror message is included and echoed

Creating a standalone static page in Wordpress showcasing the header, sidebar, and footer of the twenty fourteen template

Having trouble with table sorting in Jquery?

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

Troubleshooting Issue with jQuery replaceWith in Loop

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

Utilizing the data sent to a modal to enhance the functionality of the code by combining it with the src attribute of an <embed> element

Utilizing PHP and jQuery Ajax in conjunction with infinite scroll functionality to enhance filtering capabilities

Harnessing the power of flexbox for data visualization

Converting HTML to PDF using AngularJS

Ways to control the number of boxes that are checked

Want to analyze the response time of jQuery AJAX and initiate specific actions based on the results