相关疑难解决方法(0)

使用jQuery UI draggables和droppables时,如何在drop上更改拖放的元素？我试图将一个DIV拖动到另一个可排序的DIV.在删除时,我想更改已删除的DIV上的类并更改其innerHTML内容.

在阅读各种StackOverflow问题后,我的代码如下所示:

$(".column").droppable({
  accept: '.element-dragging', 
    drop: function(event, ui) {
        if ($(ui.draggable).hasClass("elemtxt")) {
            $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>');
        }
    }
})

它不适合我.:-(

我的代码的完整副本位于http://www.marteki.com/jquery/bugkilling.php.

我正在设计一个表单构建界面.所有可用字段都位于界面左侧的无序列表中,右侧有一个大的空的无序列表,它将成为我的webform.使这个界面工作的"技巧"是将左侧的列表项转换为有效的html元素,方法是将html附加到droppable ui元素中,然后将它们附加到右侧的可排序列表中.

我有它工作......主要是...使用draggable()和sortable().目前,我使用sortable的receive事件从draggable元素中获取id,我将其置于data()块中以传递给update事件.从那里,我使用id元素进行ajax调用,确定它是什么类型的字段以及应该从后端添加哪些选项,构建元素,然后将其放在接口中使用ui.item.html,这是一个由更新功能.

我的方法的问题是它在拖动元素时也会触发,这会导致选择元素在无意中附加到可排序列表时乱丢屏幕.显然,receive事件是仅在排序从连接列表中获取项目时触发的事件.但是,如果我尝试内部html ui.item元素,它会更改源列表,而不是所需的目标.当项目已经在右侧的网络表单列表中时,如果它们只是被排序,我绝对不想修改它们.

有没有办法在连接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: …