Сохранить перетаскивание при нажатии кнопки отправить - PullRequest
Новая
       5

Сохранить перетаскивание при нажатии кнопки отправить

0 голосов
/ 24 февраля 2020

Я хочу создать два столбца, один с объектами, другой для создания списка объектов. На эти объекты просто ссылаются через уникальный идентификатор.

То, чего я хочу добиться, - это перетащить из столбца в столбец, изменить положение в одном столбце, а затем нажать «Сохранить только один столбец».

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

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

У меня отлично работает перетаскивание, но не сохранение при нажатии и сериализация списка для сохранения.

Вот код, используемый: 

<form name="polls" action="polls.php?action=updatenew" method="post">
<table>
     <tr>
          <td style="width:15%;" ><strong>New Poll Name</strong></td>
          <td style="width:30%;float:left;"><input type="text" name="poll_name" /></td>
      </tr>
      <tr >
        <td colspan="2">
        <div id="left">
            <h5>New Poll </h5>
            <ul class="poll" id="poll"> </ul>
        </div>

        <div id="right">
            <h5>Poll Objects available</h5>
            <ul class="poll" id="objects">
<li class="list-group-item" id=6>Test input test 2</li>
<li class="list-group-item" id=7>Test input field 1</li>
<li class="list-group-item" id=8>drop down test</li>
<li class="list-group-item" id=9>radio test 1</li>
<li class="list-group-item" id=10>check box test</li>
<li class="list-group-item" id=11>drop down test 2</li>
            </ul>
        </div>
    </td>
  </tr>

<script>

$(document).ready(function() { // begin document ready

    $('#poll').sortable({  // begin sortable
       connectWith: '#objects',
       receive: function(event,ui) {  // begin receive
            var id = $(ui.item).attr('id');
            var data_to_send = $('#list-items').sortable("serialize");   

       } // end receive


    });  // end sortable

    $('#objects').sortable({  // begin sortable
       connectWith: '#poll',
       receive: function(event,ui) {  // begin receive
       } // end receive
    });  // end sortable

    function saveDisplayChanges()
    {
      var order = $("ul#poll").sortable("serialize");
        $.post("polls.php",order){
      });
    }

    $('#button').click(function(event){
        var order = $("ul#poll").sortable("serialize");
        $.post("polls.php",order{
                });
        event.preventDefault();
    });
    $('li').on('mousedown', function() {
       $(this).css(
            {
                'background-color' : 'black',
                'color' : 'white'
            }
        )
    }).on('mouseup', function() {
        $(this).css(
            {
                'background-color': '',
                'color' : ''
            }
        )        
    });  

}); // end document ready
</script>
        <tr>
          <td align="right" class="main" colspan="2"><br><input type="image" src="button_save.gif" border="0" alt="Save" title=" Save "  id="button"  /></td>
        </tr>

      </table>
    </form>
...