dumb version of Y.Sortable with drop handling

gistfile1.js

YUI.add(
    "custom-manage-parcel_manager",
    function(Y) {
        var PACKAGE_TEMPLATE = '<li>{variant_sku} ({label})<input type="hidden" name="package-{id}" value="{parcel_id}" /></li>';

        var Clazz = Y.namespace("Bikes.Manage").ParcelManager = Y.Base.create(
            "custom_manage_parcel_manager",
            Y.IC.RendererBase,
            [],
            {
                _button_add:   null,
                _button_reset: null,

                //initializer: function (config) {
                    //Y.log(Clazz.NAME + "::initializer");
                    //Y.log(Clazz.NAME + "::initializer - packages: " + Y.dump(config.packages));
                //},
                
                destructor: function () {
                    Y.log(Clazz.NAME + "::destructor");

                    this._button_add   = null;
                    this._button_reset = null;
                },

                renderUI: function () {
                    Y.log(Clazz.NAME + "::renderUI");
                
                    Clazz.superclass.renderUI.apply(this, arguments);
                
                    this._grid_node              = Y.Node.create('<div class="yui3-g mini" style="padding-left: 5px;"></div>');
                    this._grid_node.generateID();

                    this._src_node               = Y.Node.create('<div class="yui3-u" style="padding-top: 2px;">Packages</div>');
                    this._src_list_node          = Y.Node.create('<ul></ul>');
                    this._parcels_node           = Y.Node.create('<div class="yui3-u">Parcels</div>');
                    this._parcels_container_node = Y.Node.create('<div></div>');
                
                    this._src_node.addClass( this.getClassName("packages") );
                    this._src_list_node.addClass( this.getClassName("package_list") );
                    this._parcels_node.addClass( this.getClassName("parcels") );
                    this._parcels_container_node.addClass( this.getClassName("parcels", "container") );

                    this._grid_node.append(this._src_node);
                    this._grid_node.append(this._parcels_node);
                
                    this._src_list_node.generateID();
                    this._src_node.append(this._src_list_node);

                    this._button_add = Y.Node.create('<button class="mini">+</button>');
                    this._button_add.on(
                        "click",
                        function (e) {
                            e.preventDefault();
                            this.addParcel();
                        },
                        this
                    );
                    this._button_reset = Y.Node.create('<button class="mini">Reset</button>');
                    this._button_reset.on(
                        "click",
                        function (e) {
                            e.preventDefault();
                            this.syncUI();
                        },
                        this
                    );
    
                    this._parcels_node.append(this._button_add);
                    this._parcels_node.append(this._button_reset);
                    this._parcels_node.append(this._parcels_container_node);

                    this.get("contentBox").append(this._grid_node);
                },

                bindUI: function () {
                    Y.log(Clazz.NAME + "::bindUI");

                    Clazz.superclass.bindUI.apply(this, arguments);

                    this._bindPackageList(this._src_list_node);
                },

                syncUI: function () {
                    Y.log(Clazz.NAME + "::syncUI");

                    Clazz.superclass.syncUI.apply(this, arguments);

                    this._parcels_container_node.setContent("");
                    this._src_list_node.setContent("");

                    var alo = false;
                    Y.each(
                        this.get("packages"),
                        function (package, i, a) {
                            Y.log(Clazz.NAME + "::syncUI - each package: " + package.id);

                            if (package.is_combinable) {
                                package.parcel_id = "";

                                var package_node = Y.Node.create(Y.substitute(PACKAGE_TEMPLATE, package));
                                package_node.addClass("movable");

                                this._src_list_node.append(package_node);
                            }
                            else {
                                this.addParcel( [ package ] );
                                alo = true;
                            }
                        },
                        this
                    );
                    if (! alo) {
                        this.addParcel();
                    }
                },

                addParcel: function (packages) {
                    Y.log(Clazz.NAME + "::addParcel");

                    var parcel_node = Y.Node.create('<ul></ul>');
                    var p_id        = parcel_node.generateID();

                    parcel_node.addClass( this.getClassName("package_list") );

                    Y.each(
                        packages,
                        function (package) {
                            Y.log(Clazz.NAME + "::addParcel - each package");
                            package.parcel_id = p_id;

                            var package_node = Y.Node.create(Y.substitute(PACKAGE_TEMPLATE, package));
                            parcel_node.append(package_node);

                            if (package.is_combinable) {
                                package_node.addClass("movable");
                            }
                            else {
                                package_node.addClass("immovable");
                            }
                        },
                        this
                    );

                    this._parcels_container_node.append(parcel_node);

                    this._bindPackageList(parcel_node);
                },

                _bindPackageList: function (node) {
                    Y.log(Clazz.NAME + "::_bindPackageList");
                    var grid_id = this._grid_node.get("id");
                    var delegate = new Y.DD.Delegate (
                        {
                            container:  node,
                            nodes:      'li.movable',
                            target:     false,
                            dragConfig: {
                                groups: [ grid_id ]
                            }
                        }
                    );
                    delegate.dd.plug(
                        Y.Plugin.DDConstrained,
                        {
                            constrain2node: this._grid_node,
                        }
                    );
                    delegate.dd.plug(
                        Y.Plugin.DDProxy,
                        {
                            moveOnEnd: false,
                            cloneNode: true
                        }
                    );

                    delegate.on(
                        {
                            'drag:start':    Y.bind(this._onDragStart, delegate),
                            'drag:enter':    Y.bind(this._onDragEnter, delegate),
                            'drag:drophit':  Y.bind(this._onDragDropHit, delegate),
                            'drag:dropmiss': Y.bind(this._onDragDropMiss, delegate)
                        }
                    );

                    var src_drop = node.plug(
                        Y.Plugin.Drop,
                        {
                            groups: [ grid_id ]
                        }
                    );
                },

                _onDragStart: function (e) {
                    //Y.log(Clazz.NAME + "::_onDragStart");
                    //Y.log(Clazz.NAME + "::_onDragStart - delegate: " + delegate);
                    //Y.log(Clazz.NAME + "::_onDragStart - delegate - currentNode: " + delegate.get("currentNode"));
                    this.get("currentNode").setStyle("zIndex", "999");
                    this.get("currentNode").setStyle("opacity", ".1")
                },

                _onDragEnter: function (e) {
                    //Y.log(Clazz.NAME + "::_onDragEnter");
                    //Y.log(Clazz.NAME + "::_onDragEnter - e.drag: " + e.drag);
                    //Y.log(Clazz.NAME + "::_onDragEnter - e.drop: " + e.drop);
                    e.drop.get("node").append( this.get("currentNode") );

                    var parcel_id = e.drop.get("node").get("id");
                    this.get("currentNode").one("input").set("value", parcel_id);
                },

                _onDragDropHit: function (e) {
                    //Y.log(Clazz.NAME + "::_onDragDropHit");
                    //Y.log(Clazz.NAME + "::_onDragDropHit - e.drag: " + e.drag);
                    //Y.log(Clazz.NAME + "::_onDragDropHit - e.drop: " + e.drop);
                    this.get("currentNode").remove();
                    e.drop.get("node").append( e.drag.get("node") );

                    e.drag.get("node").setStyle("opacity", "1");
                    e.drag.get("node").setStyle("zIndex", "");
                },

                _onDragDropMiss: function (e) {
                    //Y.log(Clazz.NAME + "::_onDragDropMiss");
                    //Y.log(Clazz.NAME + "::_onDragDropMiss - e.drag: " + e.drag);
                    //Y.log(Clazz.NAME + "::_onDragDropMiss - e.drop: " + e.drop);
                    this.get("currentNode").setStyle("opacity", "1");
                    this.get("currentNode").setStyle("zIndex", "");
                }
            },
            {
                ATTRS: {
                    packages: {
                        value: null
                    }
                }
            }
        );

        Y.IC.Renderer.registerConstructor('Bikes.Manage.ParcelManager', Clazz.prototype.constructor);
    },
    "@VERSION@",
    {
        requires: [
            "custom-manage-parcel_manager-css",
            "ic-renderer-base",
            "dd-delegate",
            "dd-drop-plugin",
            "dd-constrain"
        ]
    }
);