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

вводишь в поисковике "jquery sortable" и вуаля - https://jqueryui.com/sortable/ =)

рони,
код не проходит проверку esLint)

Запутано очень конечно. Хотя вы же это пишите людям как примеры, а они вставляют в проекты без изменения)

KosBeg,
ну а мне лень гугл открыть)

блииииин...
я хотел упростить его читаемость -

$(function() {  
  function c(){
    var a = $("#menu a"),
    
	a = $.map(a, function(b) {
      var a = $("<input/>", 
	
	{val: $(b).attr("href"),
      on: {
	    input: function() {
          $(b).attr("href", this.value)
        }
      }
    }),
    
	d = $("<input/>", 
    {val: $(b).text(),
      on: {
        input: function() {
          $(b).text(this.value)
        }
      }
    }),
    
	c = $("<p/>", {
      data: {
        b: b
      }
    });

      c.append([a, d]);
      return c;
    });
    $("#edit").append(a);
  }

//вызов функции c
c();
		
$("#edit").sortable({
  stop: function(a, b) {
    var c = $.map($("#edit p"), function(a) {
      return $(a).data("b")
    });
    
	$("#menu").append(c)
  }
});
});

ХЗ!

В этом-то и проблема, новички считают что если им дали код те кто более-менее розбирается - он сует этот код в рабочий проект!

*!*var a*/!* = $("#menu a"),
*!*a*/!* = $.map(a, function(b) {
*!*var a*/!* = $("<input/>",

пойду выпью валерьянки :-?

код : нашли ссылки создали столькоже тегов p ;
в p положили два инпута для редактирования ссылки
на p навесили драг-дроп
перемещаются p, меняется и порядок ссылок. всё

А как можно посмотреть что в объекте находится, содержимое типо на экран вывести. От например код:

var a = $("#menu a")

и я хочу вывести на экран что там в объекте.

А че порядок ссылок меняется? На инпут же драг дроп наложено?