using KnockoutJS with JQuery with drag and drop

Question

I want the $root.addField action to happen whenever I drag my items onto the DROP THINGS HERE div. Just like what happens when you click the add field button.

Here is a fiddle so you can play with it -- http://jsfiddle.net/pt6k26kh/

JS

$(document).ready(function(){
var initialData = [
    { formTitle: "formTitle", formDescription: "formDesc", fields: [
        { fieldId: "text1", title: "title", description: "description Field", isReq: true },
        { fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
    },
      { formTitle: "formTitle", formDescription: "formDesc", fields: [
        { fieldId: "text1", title: "title", description: "description Field", isReq: true },
        { fieldId: "text2", title: "ttitle22", description: "description Field 2", isReq: false }]
    }

];

var FieldsModel = function(fieldTemplates) {
    var self = this;
    self.fieldTemplates = ko.observableArray(ko.utils.arrayMap(fieldTemplates, function(fieldTemplate) {
        return { 
            formTitle: fieldTemplate.formTitle, formDescription: fieldTemplate.formDescription, 
            fields: ko.observableArray(fieldTemplate.fields) };

    }));

    self.addfieldTemplate = function() {
        self.fieldTemplates.push({
            formTitle: "",
            formDescription: "",
            fields: ko.observableArray()
        });
    };

    self.removefieldTemplate = function(fieldTemplate) {
        self.fieldTemplates.remove(fieldTemplate);
    };

    self.addField = function(fieldTemplate, e) {
        console.log("---addField");
        console.log(e);

        fieldTemplate.fields.push({
            fieldId: "text",
            title: "",
            description: "",
            isReq: false
        });

    };

    self.removeField = function(field) {
        $.each(self.fieldTemplates(), function() { this.fields.remove(field) })
    };

    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.fieldTemplates), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new FieldsModel(initialData));

});

HTML

    <h2>Forms</h2>
    <div id='contactsList'>
        <table class='contactsEditor'>
            <tr>
                <th>Form Title</th>
                <th>Form Description</th>
                <th>Fields</th>
            </tr>
            <tbody data-bind="foreach: fieldTemplates">
                <tr>
                    <td>
                        <input data-bind='value: formTitle' />
                        <div><a href='#' data-bind='click: $root.removefieldTemplate'>Delete</a></div>
                    </td>
                    <td><input data-bind='value: formDescription' /></td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: fields">
                                <tr>
                                    <td><input data-bind='value: title' /></td>
                                    <td><input data-bind='value: description' /></td>
                                    <td><input type="checkbox" data-bind='checked: isReq' /></td>
                                    <td><a href='#' data-bind='click: $root.removeField'>Delete</a></td>
                                </tr>
                            </tbody>
                        </table>
                        <a href='#' data-bind='click: $root.addField'>Add field</a>     

                        <div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>                  
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="droppings" >
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 1</div>
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 2</div>
        <div data-bind='drag: {value: $data}' class="toDrop">toDrop 3</div>
    </div>
    <div class="dropped" data-bind='event: {drop: $root.addField}'>DROP THINGS HERE</div>


    <script type="text/javascript">

        $(".droppings .toDrop").draggable({
            helper: "clone",
            drop: function(event, ui){
            }
        }); 

        $(".dropped").droppable({
            drop: function(event, ui){
                $(".dropped").append('<div class="beenDropped">beenDropped</div>');
                console.log("dropped");
            }
        });

    </script>

Answer 1

Based on the discussion above and my understanding of the problem I think we should do the following.

Add a new method called

self.globalAddField = function(){
   self.addField(self.fieldTemplates()[self.fieldTemplates().length-1])
}

The new method will pass the last item of the self.fieldTemplates() as an argument to the existing addField method. The rest of the functionality will remain same.

Modify the HTML as below.

<div class="dropped" data-bind='event: {drop: $root.globalAddField}'>DROP THINGS HERE</div>

Updated fiddle. http://jsfiddle.net/sherin81/pt6k26kh/2/