Как унаследовать существующие настройки для новых созданных объектов в JQuery? - PullRequest
Новая
       19

Как унаследовать существующие настройки для новых созданных объектов в JQuery?

0 голосов
/ 25 декабря 2011

Я использую плагин jquery для создания перетаскиваемых объектов.

плагин здесь и демоверсии здесь .

Также мое тестирование с jsfiddle здесь

Сценарий начинается с этого: 

$('.drag')
    .live("click", function(){
        $( this ).toggleClass("selected");
    })
    .drag("init",function(){
        if ( $( this ).is('.selected') )
            return $('.selected');                      
    })
    .drag("start",function( ev, dd ){
        dd.attr = $( ev.target ).attr("className");
        dd.width = $( this ).width();
        dd.height = $( this ).height();
        dd.limit = $div.offset();
        dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
        dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
    })
    .drag(function( ev, dd ){
        var props = {};
        if ( dd.attr.indexOf("E") > -1 ){
            props.width = Math.round(Math.max( 32, dd.width + dd.deltaX )/ 20 ) * 20;
        }
        if ( dd.attr.indexOf("S") > -1 ){
            props.height = Math.round(Math.max( 32, dd.height + dd.deltaY )/ 20 ) * 20;
        }
        if ( dd.attr.indexOf("drag") > -1 ){
            props.top = Math.round(Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) )/ 20 ) * 20;
            props.left = Math.round(Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )/ 20 ) * 20;
        }
        $( this ).css( props );
});

это может показаться сложным, но все, что он делает, это делает некоторые перетаскиваемые div-ы для этого htnl: 

<input type="button" id="add" value="Add a Box" />
<div class="test" id="container">


<div class="drag" style="left:100px;">
    <div class="handle SE"></div>
</div>
<div class="drag" style="left:180px;">
    <div class="handle SE"></div>
</div>

</div>

тогда я использую кнопку, чтобы добавить еще несколько видео: 

var $div = $('#container');
var num = 1;
    $('#add').click(function(){
        $('<div class="handle SE"><div class="drag" style="left:20px;"/>')
            .text( num++ )
            .appendTo( document.body )
            .wrap('<div class="drag" style="left:20px;"/>');
    });

И проблема, с которой я столкнулся, заключается в том, что вновь созданные элементы div для точечного наследования уже существующих настроек.

Если я добавлю отдельный код, он будет работать с этим: 

$('.drag').live("drag",function( ev, dd ){
        $( this ).css({
           top:  Math.round(dd.offsetY / 20 ) * 20,
           left:  Math.round(dd.offsetX / 20 ) * 20
        });
});

но я хочу, чтобы вновь созданные блоки использовали первый скрипт. Так что я думаю, проблема в том, что настройки не наследуются

Есть идеи? Спасибо

1 Ответ

0 голосов
/ 25 декабря 2011

Вы должны специально добавить скрипт во вновь созданный элемент, иначе он не будет применяться. Поместите инициализацию сценария перетаскивания в отдельную функцию и вызовите ее для нового элемента div: 

$('#add').click(function(){
        var newDiv = $('<div class="handle SE"><div class="drag" style="left:20px;"/>')
            .text( num++ )
            .appendTo( document.body )
            .wrap('<div class="drag" style="left:20px;"/>');
          initDrag(newDiv);
    });
...