Javascript YUI 3带约束的拖放_Javascript_Drag And Drop_Draggable_Yui3

Javascript YUI 3带约束的拖放

javascript

Javascript YUI 3带约束的拖放,javascript,drag-and-drop,draggable,yui3,Javascript,Drag And Drop,Draggable,Yui3,我是YUI的新手。我想用contstraint实现拖放操作。我遵循简单的YUI 3指南，并且能够根据他们给出的代码实现拖放，这就是。 HTML <body> <div id="demo"> <ul id="list1"> <li class="list1">Item #1</li> <li class="list1">Item #2</li> <li class=

我是YUI的新手。我想用contstraint实现拖放操作。我遵循简单的YUI 3指南，并且能够根据他们给出的代码实现拖放，这就是。

HTML

    <body>
  <div id="demo">
   <ul id="list1">
    <li class="list1">Item #1</li>
    <li class="list1">Item #2</li>
    <li class="list1">Item #3</li>
    <li class="list1">Item #4</li>
    <li class="list1">Item #5</li>
    <li class="list1">Item #6</li>
    <li class="list1">Item #7</li>
    <li class="list1">Item #8</li>
    <li class="list1">Item #9</li>
    <li class="list1">Item #10</li>
    <li class="list1">Item #11</li>
    <li class="list1">Item #12</li>  
</ul>
<ul id="list2">
    <li class="list2">Item #1</li>
    <li class="list2">Item #2</li>
    <li class="list2">Item #3</li>
    <li class="list2">Item #4</li>
    <li class="list2">Item #5</li>
    <li class="list2">Item #6</li>
    <li class="list2">Item #7</li>
    <li class="list2">Item #8</li>
    <li class="list2">Item #9</li>
    <li class="list2">Item #10</li>
    <li class="list2">Item #11</li>
    <li class="list2">Item #12</li>  
</ul>
</div>

Javascript

YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'dd-scroll', function(Y) {
    //Listen for all drop:over events
    //Y.DD.DDM._debugShim = true;   


    Y.DD.DDM.on('drop:over', function(e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');

        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Set the new parentScroll on the nodescroll plugin
            e.drag.nodescroll.set('parentScroll', e.drop.get('node').get('parentNode'));
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function(e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
        Y.DD.DDM.syncActiveShims(true);
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function(e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function(e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
                //Set the new parentScroll on the nodescroll plugin
                e.drag.nodescroll.set('parentScroll', e.drop.get('node'));
            }
        }
    });

    //Static Vars
    var goingUp = false, lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.all('#demo ul li');
    lis.each(function(v, k) {


        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#demo'
        }).plug(Y.Plugin.DDNodeScroll, {
            node: v.get('parentNode')
        });
    });
 Y.one('#make').on('click', function(e) {

    YUI().use('dd-drag', 'dd-proxy', function(Y) {
    //Selector of the node to make draggable
    var dd = new Y.DD.Drag({
        container: '#demo',
        node: 'li'
    }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag

    var demo =Y.one('#demo ul');
        for (var i = 1; i < 11; i++) {
            //demo.append('<li class="list3">New item #' + i + '</i><br>');
            demo.append('<li class="list3">Item #' + i + '</li>' )
        }
    })
    });




    //Create simple targets for the 2 lists.
    var uls = Y.all('#demo ul');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
});

YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });

    del.on('drag:start', function(e) {
        e.target.get('node').setStyle('opacity', '.5');
    });
    del.on('drag:end', function(e) {
        e.target.get('node').setStyle('opacity', '1');
    });

    del.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play'
    });

    del.dd.plug(Y.Plugin.DDProxy, {
        moveOnEnd: false,
        cloneNode: true
    });

    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
    drop.drop.on('drop:hit', function(e) {
        drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
    });


});

YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });

    del.on('drag:start', function(e) {
        e.target.get('node').setStyle('opacity', '.5');
    });
    del.on('drag:end', function(e) {
        e.target.get('node').setStyle('opacity', '1');
    });

    del.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play'
    });

    del.dd.plug(Y.Plugin.DDProxy, {
        moveOnEnd: false,
        cloneNode: true
    });

    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
    drop.drop.on('drop:hit', function(e) {
        drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
    });


});

YUI（）。使用（'dd-constraint'，'dd-proxy'，'dd-drop'，'dd-scroll'，函数（Y）{
//倾听所有的下降：结束事件
//Y.DD.DDM.\u debugShim=true；
Y.DD.DDM.on（'drop:over'，功能（e）{
//获取对拖放节点的引用
var drag=e.drag.get（'node'），
drop=e.drop.get（'node'）；
//我们要在一个li节点上降落吗？
if（drop.get（'tagName'）.toLowerCase（）='li'）{
//我们不上去吗？
如果（！goingUp）{
drop=drop.get（'nextSibling'）；
}
//将节点添加到此列表中
e、 drop.get（'node'）.get（'parentNode'）.insertBefore（拖放）；
//在nodescroll插件上设置新的parentScroll
e、 drag.nodescroll.set（'parentScroll'，e.drop.get（'node'）.get（'parentNode'）；
//调整此节点垫片的大小，以便我们以后可以放置它。
e、 drop.sizeShim（）；
}
});
//侦听所有拖动：拖动事件
Y.DD.DDM.on（'drag:drag'，函数（e）{
//得到最后一个y点
变量y=e.target.lastXY[1]；
//它是否大于lastY变量？
if（y新项“#”+i+”
）；
demo.append（“项“#”+i+”）
}
})
});
//为这两个列表创建简单的目标。
var uls=Y.all（“#demo ul”）；
每个uls（功能（v，k）{
var tar=新的Y.DD.Drop({
节点：v
});
});
});
YUI（）。使用（'dd-delegate'，'dd-drop-plugin'，'dd-constraint'，'dd-proxy'，函数（Y）{
var del=新的Y.DD.Delegate({
容器：“#演示”，
节点：“li”
});
del.on（'drag:start'，函数（e）{
e、 target.get（'node'）.setStyle（'opacity'，'.5'）；
});
del.on（'drag:end'，函数（e）{
e、 target.get（'node'）.setStyle（'opacity'，'1'）；
});
del.dd.plug（Y.Plugin.dd）{
约束2节点：“#播放”
});
del.dd.plug（Y.Plugin.DDProxy{
莫沃宁：错，
克隆诺德：对
});
var-drop=Y.one（“#drop”）.plug（Y.Plugin.drop）；
drop.drop.on（'drop:hit'，函数（e）{
drop.set（'innerHTML'，您删除的：'+e.drag.get（'node'）.get（'innerHTML'）+''）；
});
});

我想在左边拖动的意思是当我拖动蓝色到黄色。一旦蓝色物品落在黄色区域，我想重新填充它。YUI指南与我在此想要实现的目标类似：

我不太清楚如何同时实施这两项行动，以达到我需要的效果。任何帮助都是好的。谢谢

Javascript

YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'dd-scroll', function(Y) {
    //Listen for all drop:over events
    //Y.DD.DDM._debugShim = true;   


    Y.DD.DDM.on('drop:over', function(e) {
        //Get a reference to our drag and drop nodes
        var drag = e.drag.get('node'),
            drop = e.drop.get('node');

        //Are we dropping on a li node?
        if (drop.get('tagName').toLowerCase() === 'li') {
            //Are we not going up?
            if (!goingUp) {
                drop = drop.get('nextSibling');
            }
            //Add the node to this list
            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
            //Set the new parentScroll on the nodescroll plugin
            e.drag.nodescroll.set('parentScroll', e.drop.get('node').get('parentNode'));
            //Resize this nodes shim, so we can drop on it later.
            e.drop.sizeShim();
        }
    });
    //Listen for all drag:drag events
    Y.DD.DDM.on('drag:drag', function(e) {
        //Get the last y point
        var y = e.target.lastXY[1];
        //is it greater than the lastY var?
        if (y < lastY) {
            //We are going up
            goingUp = true;
        } else {
            //We are going down.
            goingUp = false;
        }
        //Cache for next check
        lastY = y;
        Y.DD.DDM.syncActiveShims(true);
    });
    //Listen for all drag:start events
    Y.DD.DDM.on('drag:start', function(e) {
        //Get our drag object
        var drag = e.target;
        //Set some styles here
        drag.get('node').setStyle('opacity', '.25');
        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
        drag.get('dragNode').setStyles({
            opacity: '.5',
            borderColor: drag.get('node').getStyle('borderColor'),
            backgroundColor: drag.get('node').getStyle('backgroundColor')
        });
    });
    //Listen for a drag:end events
    Y.DD.DDM.on('drag:end', function(e) {
        var drag = e.target;
        //Put our styles back
        drag.get('node').setStyles({
            visibility: '',
            opacity: '1'
        });
    });
    //Listen for all drag:drophit events
    Y.DD.DDM.on('drag:drophit', function(e) {
        var drop = e.drop.get('node'),
            drag = e.drag.get('node');

        //if we are not on an li, we must have been dropped on a ul
        if (drop.get('tagName').toLowerCase() !== 'li') {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
                //Set the new parentScroll on the nodescroll plugin
                e.drag.nodescroll.set('parentScroll', e.drop.get('node'));
            }
        }
    });

    //Static Vars
    var goingUp = false, lastY = 0;

    //Get the list of li's in the lists and make them draggable
    var lis = Y.all('#demo ul li');
    lis.each(function(v, k) {


        var dd = new Y.DD.Drag({
            node: v,
            target: {
                padding: '0 0 0 20'
            }
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false
        }).plug(Y.Plugin.DDConstrained, {
            constrain2node: '#demo'
        }).plug(Y.Plugin.DDNodeScroll, {
            node: v.get('parentNode')
        });
    });
 Y.one('#make').on('click', function(e) {

    YUI().use('dd-drag', 'dd-proxy', function(Y) {
    //Selector of the node to make draggable
    var dd = new Y.DD.Drag({
        container: '#demo',
        node: 'li'
    }).plug(Y.Plugin.DDProxy); //This config option makes the node a Proxy Drag

    var demo =Y.one('#demo ul');
        for (var i = 1; i < 11; i++) {
            //demo.append('<li class="list3">New item #' + i + '</i><br>');
            demo.append('<li class="list3">Item #' + i + '</li>' )
        }
    })
    });




    //Create simple targets for the 2 lists.
    var uls = Y.all('#demo ul');
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v
        });
    });
});

YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });

    del.on('drag:start', function(e) {
        e.target.get('node').setStyle('opacity', '.5');
    });
    del.on('drag:end', function(e) {
        e.target.get('node').setStyle('opacity', '1');
    });

    del.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play'
    });

    del.dd.plug(Y.Plugin.DDProxy, {
        moveOnEnd: false,
        cloneNode: true
    });

    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
    drop.drop.on('drop:hit', function(e) {
        drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
    });


});

YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });

    del.on('drag:start', function(e) {
        e.target.get('node').setStyle('opacity', '.5');
    });
    del.on('drag:end', function(e) {
        e.target.get('node').setStyle('opacity', '1');
    });

    del.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#play'
    });

    del.dd.plug(Y.Plugin.DDProxy, {
        moveOnEnd: false,
        cloneNode: true
    });

    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
    drop.drop.on('drop:hit', function(e) {
        drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
    });


});

YUI（）。使用（'dd-delegate'，'dd-drop-plugin'，'dd-constraint'，'dd-proxy'，函数（Y）{
var del=新的Y.DD.Delegate({
容器：“#演示”，
节点：“li”
});
del.on（'drag:start'，函数（e）{
e、 target.get（'node'）.setStyle（'opacity'，'.5'）；
});
del.on（'drag:end'，函数（e）{
e、 target.get（'node'）.setStyle（'opacity'，'1'）；
});
del.dd.plug（Y.Plugin.dd）{
约束2节点：“#播放”
});
删除dd插头（Y