jQuery可拖動排序，在放置的元素上更改html

Question

我正在設計一個表單構建界面。 所有可用字段將位於界面左側的無序列表中，右側帶有一個大的空無序列表，它將成為我的Web表單。 使該界面起作用的“技巧”是通過將html附加到droppable ui元素之前，將它們從左側轉換為有效的html元素，然后再將它們附加到右側的可排序列表中。

我有它的工作...主要是...使用draggable（）和sortable（）。 當前，我使用sortable的receive事件從draggable元素獲取ID，並將其放入data（）塊中以傳遞給update事件。 從那里，我對id元素進行ajax調用，確定它是什么類型的字段，以及應該從后端添加什么選項，構建該元素，然后使用ui.item.html將其放在接口中由update函數傳遞的元素。

我的方法的問題在於，拖動元素時也會觸發，這會導致選擇元素在無意附加到可排序列表時亂拋屏幕。 顯然，receive事件是僅當排序從連接的列表中獲得一項時才觸發的事件。 但是，如果我嘗試對ui.item元素進行內部html ui.item ，它將更改源列表，而不是所需的目標。 當項目已經在右側的Webform列表中時，我絕對不想對它們進行排序（如果只是對其進行排序）。

有什么方法可以訪問和更改連接的sortable()列表接收事件中的目標html嗎？ 還有其他策略可以解決我的挑戰嗎？

編碼：

<div class="grid_3 mainwindow formfields">

    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>

    </div>
    </div> 

    <div class="grid_12 formcontainer formfields">
    <h3>Webform</h3>
    <form id="form" action="http://responses.smarttracks.com" method="post">
         <input type="hidden" name="webform_id" id="webform_id" value="<?php echo $webform_id ?>"></input>

         <ul id="webform_list"></ul>
    </form>
    </div>

還有jQuery

/*****  Make webform fields draggable   *****/
    $( ".master_list li" ).draggable({
        connectToSortable: "#webform_list",
        helper: "clone",
        revert: "invalid"
    });

/*****  Make form elements sortable *****/
    $( "#webform_list" ).sortable({
        revert: true,
        cursor: 'pointer',
        placeholder: "placeholderdiv",
        receive: function(event, ui) {
            $(this).data('id', ui.item[0].id);
            var element = event.target


        },

        update: function(event, ui) {
            var fieldname = ui.item.text();
            if ($(this).data('id')) {

                $.ajax({
                    url: "/webform/getFieldAttributes",                 
                    timeout: 30000,
                    type: "POST",
                    data: 'id='+$(this).data('id'),
                    dataType: 'json',
                    error: function(XMLHttpRequest, textStatus, errorThrown)  {
                         alert("An error has occurred making the request: " + errorThrown)
                    },
                    success: function(data){
                        switch (data.control_type) {
                            case 'text':
                                var inputfield = $('<input type="text">').attr('id', 'fieldname');

                                var field = (ui.item).text();

                                switch (field) {
                                    case 'Email Address':
                                        inputfield.addClass('validate[optional,custom[email]]');
                                        break;
                                    default:
                                        inputfield.addClass('validate[required]');
                                        break;
                                }

                                break;
                            case 'textarea': 
                                var inputfield = $('<textarea>');
                                break;
                            case 'Dropdown Menu (Single Select)':
                                var inputfield = $('<select>');

                                $.each(data.field_options, function(name, value) {
                                    inputfield.append($("<option></option>").attr("value",name).text(value)) 
                                });

                                inputfield.addClass('validate[required]');
                                break;
                            case 'Radio Buttons (Single Select)':

                                var inputfield = $('<div class="webform_radiogroup">');

                                $.each(data.field_options, function(name, value) {
                                    var container = $('<div class="webform_radio_option">');
                                    var radio = $('<input type="radio">').attr({    name: name,value: value,id: name });
                                    radio.appendTo(container);
                                    $('<label for="'+name+'">'+name+'</label>').appendTo(container);
                                    $('<div class="clear">').appendTo(container);

                                    container.appendTo(inputfield);
                                });
                                break;
                        }

                        if (data.control_type == 'Radio Buttons (Single Select)') {
                            ui.item.html('<div class="webform_radiogroup_label">'+fieldname+'</div>').append(inputfield).append('<div class="clear">').wrapInner('<div class="webform_questiongroup">').wrapInner('<div class="hoverdiv" />');
                        } else {
                            ui.item.html('').append('<label for="'+fieldname+'">'+fieldname+'</label>').append(inputfield).wrapInner('<div class="hoverdiv" />');
                        }

                    }
                });
            }
        }   
    });

Answer 1

而是像這樣使用droppable

    $( ".master_list li" ).draggable({
      connectToSortable: "#webform_list",
      helper: "clone",
      revert: "invalid"
   });
    $( "#webform_list" ).droppable({
        drop: function( event, ui ) {
           // your ajax code
        }
    }).sortable({
       handle : 'p',
       cursor : 'crosshair'
   });

我還沒有發布完整的代碼，只是給了您一個大概的想法。

Answer 2

您根本不需要使用receive方法。 您可以使用$(ui.item)從更新方法訪問該對象

只需將您的代碼更改為：

    placeholder: "placeholderdiv",
    // removed receive method

    update: function(event, ui) {

        var draggingElement = $(ui.item);
        var fieldname = draggingElement.text();
        var fieldId = draggingElement.attr('id'); // or whatever you require.

        if (fieldId) {
           // etc...

至於事件觸發兩次的問題，我試圖復制這是JsFiddle，但是我無法將代碼添加到小提琴中嗎？

謝謝。