Элемент перетаскивания Jquery после изменения в диалоговом окне при перетаскивании переходит в исходное состояние по умолчанию - PullRequest
Новая
       2

Элемент перетаскивания Jquery после изменения в диалоговом окне при перетаскивании переходит в исходное состояние по умолчанию

0 голосов
/ 05 июля 2011

у меня есть этот код перетаскивания для моих элементов 

$( ".sortable" ).sortable({
  revert: true
});
        $( ".draggable" ).draggable({
            connectToSortable: ".sortable",
            helper: "clone", //clone 
        revert: "true"
    });
     $( ".sortable" ).droppable({
        drop: function( event, ui ) {
             var $element = $(ui.draggable).clone();

            $element.find('.control').children('.delete').css('display', 'inline').click(function () {
                $(this).parent().remove();
            });// display properties Link
            $element.find('.control').children('.properties').css('display', 'inline'); 

            //For Text Box Change the text and add a label
            if($element.find('.control').find('input').attr('type') == "text")
            {
                $element.find('.control').find('.controlText').html("");
                $element.find('.control').find('label').html("Label Here"); 
            }

        }
    });

Это код для элемента перетаскивания 

 <div class="tools">    
 <ul>
 <li class="draggable" >
     <div class="control">
      <label>&nbsp;</label>
      <input type="text" name="txt" value="" /><span class="controlText"> Text Box </span>
      <div class="delete" style="display:none"><sup>x</sup></div>
      <div class="properties txtbox" style="display:none">Properties</div>
     </div>
    </li>
 </ul>
 </div>

При перетаскивании текстового поля к нему присоединяется событие 

$('.txtbox').live('click', function() {
     //get the label
        var label = $(this).parent().find('label').html();
        $("#textbox_label").val(label);
        $( "#dialog-textbox" ).dialog( "open" ).data('parent_div',$(this).parent());
        return false;
});

Это диалоговое окно, которое открывается при нажатии кнопки Свойства 

<div id="dialog-textbox" title="Text Box Properties" style="display:none">
<p>This is the Text Box Properties Form.</p>
<form>
<fieldset>
    <label for="textbox_label">Enter Label </label>
    <input type="text" name="textbox_label" id="textbox_label" class="text ui-widget-content ui-corner-all" />      
</fieldset>
</form>

Следующий код обрабатывает диалог 

 $("#dialog-textbox").dialog({
                        autoOpen: false,
                        height: 300,
                        width: 350,
                        modal: true,
                        buttons: {
                                "Apply": function(){
                                     //code to update element goes here...
                                    var label = $("#textbox_label").val()
                                    var $elem_clicked = $("#dialog-textbox").data('parent_div'); //This retrieves
                                    $elem_clicked.find('label').html(label); 
                                    $( this ).dialog( "close" );
                                    },
                                Cancel: function() {
                                            $( this ).dialog( "close" );
                                        }
                        }
                         });

Что здесь происходит, так это то, что у меня есть текстовое поле, которое я перетаскиваю в список ul li и которое можно сортировать, текстовое поле добавляется в список, а затем я показываю и закрываю и ссылки свойств, прикрепленные к текстовому полю , при щелчке по свойствам открывается диалоговое окно с запросом новой метки. Пользователь дает новую метку для текстового поля, которое показано с этим. Но что не так, так это когда я снова перетаскиваю прямоугольник в сортируемом списке вверх или вниз, он возвращается в исходное состояние и новый ярлык теряется ... Я думаю, это связано с клоном-помощником, или я должен сделать клон из перетаскиваемый предмет?

1 Ответ

1 голос
/ 06 июля 2011

Используйте простой трюк, чтобы отличить ваш оригинальный элемент от перетаскиваемой копии: - добавить класс к метке исходного элемента, например, 

 <label class='orig'>&nbsp;</label>

- в вашем $ (". Sortable"). Droppableобработчик добавить в конец 

$(ui.draggable).find('.control').find('.orig').html("Label Here").removeClass('orig');

Это должно решить вашу проблему.Проверьте это здесь .

...