Question

I m, using jQuery 1.7 and jQuery UI 1.8 from Valle s CDN (so I have the recent edition).

我的网页上有两个内容,一个是头盔,另一个是装有每个头目清单项目的集装箱的内容区。目前,我都附属于这两部,使我能够重新安排导航要素和内容集装箱的视线(另外)。我试图实现的行为是,当我拖拉一个导航要素时,内容集装箱随之移动,而且当我把导航要素放在名单上的新位置时,内容集装箱也与其在内容领域的新立场保持一致。我正在使用的网址是内联网网页,因此我无法提供链接,但我已经列入以下图表:

Navigation:
NavOne...NavTwo...NavThree
Content:
ContentOne...ContentTwo...ContentThree

After dragging NavThree between NavOne and NavTwo, the whole arrangement should look like this:

Navigation:
NavOne...NavThree...NavTwo
Content:
ContentOne...ContentThree...ContentTwo

是否有一种简单的方式将两个职业介绍所联系起来,以便他们以这种方式行事? 确实,有“ ” 能够顺利或“生存”(但我真的希望是这样)。 I m OK with it not reing the secondlyable list until the reordering in the first list is full (dropped).

我已经在“平等倡议”论坛上问过这个问题,等待一个星期的答复:

这里有一毫微米检测样本,然后转至实际项目:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
/* This is my CSS */
/* Basic reset -- outline for debugging */
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
/* Main styles */
.containerDiv {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 800px;
  height: 600px;
  white-space: nowrap;
  float: left;
}
.itemDiv {
  width: 200px;
  height: 500px;
  display: inline-block;
}
.navBar ul, .navBar li {
  display: inline;
}
</style>
</head>
<body>
<!-- This is my HTML -->
<div class="navBar">
  <ul>
    <li id="nav1">Navigation 1</li>
    <li id="nav2">Navigation 2</li>
    <li id="nav3">Navigation 3</li>
  </ul>
</div>
<div class="containerDiv">
  <div class="itemDiv" id="item1">Item 1</div>
  <div class="itemDiv" id="item2">Item 2</div>
  <div class="itemDiv" id="item3">Item 3</div>
</div>
</body>
<script>
/* This is my JavaScript */
// Make containerDiv children sortable on X-axis
$(".containerDiv").sortable({
  axis: "x"
});
// Make nav children sortable on x-axis
$(".navBar").sortable({
  axis: "x",
  items: "li"
});
// Bind sorting of each (.navBar li) to its corresponding (.containerDiv .itemDiv):
$(".navBar li").bind("mouseup", function(event,ui){
// If I use "sortupdate" I get little to no response. If I use "mouseup",
// I can at least get an alert to return the value of thisId.
// Note: I am sad that console.log is blocked in Firefox,
// because its DOM inspector is better than Chrome s
  // the (.navBar li) have ids of "nav1, nav2" and so on,
  // and the (.containerDiv .itemDiv) have corresponding ids of "item1, item2"
  // which is my way of attempting to make it easier to link them.
  // This line is my attempt to target the (.containerDiv .itemDiv) which directly
  // corresponds to the (.navBar li) which is currently being sorted:
  var tempId = "#" + $(this).attr( id ).replace("nav","item");
  // When this (.navBar li) is updated after a sort drag,
  // trigger the "sortupdate" event on the corresponding (.containerDiv .itemDiv):
  $(tempId).trigger("sortupdate");
});
</script>
</html>

在那一周,我尝试了多种不同的可能解决办法,其中没有一个是我想要它们的工作。我认为,这应当比较简单,但在一周内(在起飞和上)我有幸与它一道工作。

我已经阅读了以下相关内容,同时寻求一些见解:

我认为,如果没有其他所有因素,我至少应该能够把可以分类的、向服务器发送的警示,然后根据序列化数据编制第二份更新清单,但我想继续把这一清单放在当地浏览器上,以减少对服务器的电话(直到用户选择将新的安排留给其账户)。

因此,StackOverflow...是我试图完成的一个合理/可完成的任务,还是我只是把我的头部推倒在这里的砖瓦? 我是否应当寻找不同的方式去做? 我愿尽可能避免改变Sortable plugin,但如果我必须,我将这样做。

我以前从未使用过jsFiddle,但我认识到,这或许会有所助益,因此:。

Answer 1

AFAIK没有可用于家庭福利互助会的内在方法或模块,因此,我撰写了我自己的《酒吧法》,以模拟这种功能。

只有当你想根据一份总清单提出多种不同类别的清单,而且所有清单都有相同数目的项目时,这一解决办法才会奏效。也许这也可以使它走两条道路,但我并没有这样做。

<ul class="MasterList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="SecondList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul class="ThirdList">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>


$(  .MasterList  ).sortable
({
    start: function( event, ui )
    {
        // Store start order of the sorting element
        ui.item.OrderStart = ui.item.index();
    },
    stop: function( event, ui )
    {
        // Total number of sorting element
        var OrderTotal = $(  #ObjectiveListSortable li  ).length - 1;
        // Store drop order of the sorting element
        ui.item.OrderStop = ui.item.index();

        // Only do the element sync if there is any change of order. If you simply drag and drop the element back to same position then this prevent such cases.
        if ( ui.item.OrderStart != ui.item.OrderStop )
        {
            // Sorting element dropped to top
            if ( ui.item.OrderStop == 0 )
            {
                $(  .SecondList  ).eq( 0 ).before( $(  .SecondList  ).eq( ui.item.OrderStart ) );
                $(  .ThirdList  ).eq( 0 ).before( $(  .ThirdList  ).eq( ui.item.OrderStart ) );
            }
            // Sorting element dragged from top or dropped to bottom
            else if ( ui.item.OrderStart == 0 || ui.item.OrderStop == OrderTotal )
            {
                $(  .SecondList  ).eq( ui.item.OrderStop ).after( $(  .SecondList  ).eq( ui.item.OrderStart ) );
                $(  .ThirdList  ).eq( ui.item.OrderStop ).after( $(  .ThirdList  ).eq( ui.item.OrderStart ) );
            }
            else
            {
                $(  .SecondList  ).eq( ui.item.OrderStop - 1 ).after( $(  .SecondList  ).eq( ui.item.OrderStart ) );
                $(  .ThirdList  ).eq( ui.item.OrderStop - 1 ).after( $(  .ThirdList  ).eq( ui.item.OrderStart ) );
            }
        }
    }
});

一旦完成,你还可以启动一项活动,即:<条码>(第二语言)。trigger(复读);,列入次要名单,以便可以分类的植被按照方案方式改变项目。

Answer 2

进行这种更新的原因是,你再次试图在名单上的每一个项目上附上<代码>> 即的活动。 <>代码> 名单上的每一件物品都遭到发射,然后向名单上的各位发射,你可以把活动放在整个名单上,并拿到下文所示的物品。

$(".navBar").sortable({
  axis: "x",
  items: "li",
  update: function(event, ui) { onSort(event, ui); }
});

//this should now at least be firing when you move an item 
function onSort(event, ui)
{
    var tempId = $(ui.item).attr( id ).replace("nav","item");
    alert(tempId);
}

Answer 3

如果有人想到这一点,我就希望能举出一个可行的榜样。

var index_start = 0;
var index_stop = 0;
var swap_element = 0;
var picked_element = 0;
$(document).ready(function() {
  $( #list1 ).sortable({
    start: function(event, ui) {
      index_start = ui.item.index(); //getting index of picked element
    },
    update: function(event, ui) {
      index_stop = ui.item.index(); //getting index where element is dropped
      /*Below steps will fetch the elements from List1 based on original Index ofpicked element in List2
       and its dropped Index position*/
      picked_element = $( .l2:eq(  + index_start +  ) );
      swap_element = $( .l2:eq(  + index_stop +  ) );

      swap_element.replaceWith(picked_element);
      //replaceWith method of javascript removes the picked_element from its original    
      //position & replaces swap_element with picked_element
      if (index_start > index_stop)
        picked_element.after(swap_element);
      else
        picked_element.before(swap_element);
    },
  });
});

#list2{
  width:20%;
  float:left;
  padding:10px;
}
#list2 .l1 {
  background-color:rgba( 0,0,0,0.2 );
}

#list1{
  width:30%;
  padding:10px;
  float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="list1">
  <div class="l1">One</div>
  <div class="l1">Two</div>
  <div class="l1">Three</div>
  <div class="l1">Four</div>
  <div class="l1">Five</div>
  <div class="l1">Six</div>
</div>
<div id="list2">
  <div class="l2">One</div>
  <div class="l2">Two</div>
  <div class="l2">Three</div>
  <div class="l2">Four</div>
  <div class="l2">Five</div>
  <div class="l2">Six</div>
</div>

友情链接