Question

所以，我有一个乐队列表，我想组织成一个正在运行的订单，如下所示：

var dragSatMS = null;
function handleDragStart(e) {
    //this.style.color = 'green'; 
    dragSatMS = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text', this.innerHTML);
}
function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); 
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
}
function handleDragEnter(e) {
    this.classList.add('over');
}
function handleDragLeave(e) {
  this.classList.remove('over');
  //this.style.color = '#333';
}
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dragSatMS != this) {
    dragSatMS.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text');
  }
  return false;
}
function handleDragEnd(e) {
  [].forEach.call(mssatCols, function (mSatCol) {
    mSatCol.classList.remove('over');
     //mSatCol.style.color = '#333';
  });
}
var mssatCols = document.querySelectorAll('#ms-saturday .band-name');
[].forEach.call(mssatCols, function(msSatCol) {
  msSatCol.addEventListener('dragstart', handleDragStart, false);
  msSatCol.addEventListener('dragenter', handleDragEnter, false);
  msSatCol.addEventListener('dragover', handleDragOver, false);
  msSatCol.addEventListener('dragleave', handleDragLeave, false);
  msSatCol.addEventListener('drop', handleDrop, false);
  msSatCol.addEventListener('dragend', handleDragEnd, false);
});

我希望能够拖动这些列表项以更改整个列表中的每个波段位置。到目前为止，我有以下JavaScript来执行此操作：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    <meta name="generator" content="PSPad editor, www.pspad.com">  
    <title>
    </title>  
<script>
   $("document").ready(function()
   {
      $("#web_master_name").change(function()       // domain sorting via webmasters
    {
     var cat_val=("#category_name").val();
     var alb_val=("#album_name").val();
      $.post('ajax_actions.php?act=get_cat&cat_val='+cat_val+'&alb_val='+alb_val,function(data)
        {

          aler(data);
        });
    }); 
   });
  </script>  
  </head>  
  <body>    
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">                                
      <div class="form-group">                                         
        <select class="form-control" id="category_name">                                              
          <option value="" selected>Please Select
          </option>                                            
          <option value="Birds">Birds
          </option>                                                
          <option value="Animals">Animals
          </option>                                            
          <option value="Notinlist">Category Not in list
          </option>                                         
        </select>                                
      </div>                            
    </div>                            
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">                                
      <div class="form-group"  >                                         
        <select class="form-control" id="album_name">                                            
          <option value="" selected>Please Select
          </option>                                            
          <option value="sadb">sadb
          </option>                                                
          <option value="Animals">Animals
          </option>                                            
          <option value="Notinlist">Category Not in list
          </option>                                         
        </select>                                
      </div>                            
    </div>  
  </body>
</html>




php file
<?php
 error_reporting(0);
 foreach ($_GET as $name => $value) { $$name = $value; }
 foreach ($_POST as $name => $value) { $$name = $value; }

// warning Dont chnage anything  in This ajax action file 
// -------------------------------------------------------------------------------
if($act=="get_cat")  // function for saving domain
{ 
   echo $cat_val;
   echo $alb_val;
}

这非常有效，我可以拖放列表以使它们更改位置，并且乐队的名称可以适当地交换。但是，'data-band-id'属性的值保持不变。我知道这正是我所拥有的代码所做的，这就是我的问题。我想修改代码，这样就可以交换拖放带的名称和'data-band-id'属性的值。

我已经搜索了很多，但没有发现任何可以告诉我如何在多个值上设置数据，任何帮助都非常感激。

Answer 1

您可以查询这两个项目的attributes属性并访问data-band-id的值。获得这两个值后，您可以致电setAttribute("name", "value")更新data-band-id。您更新的handleDrop方法将是：

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dragSatMS != this) {
    dragSatMS.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text');
    //Get the data-band-id of both items.
    itemToReplaceAttr = this.attributes["data-band-id"].value;
    draggedItemAttr = dragSatMS.attributes["data-band-id"].value;
    //Call "setAttribute" to update the attributes.
    this.setAttribute("data-band-id", draggedItemAttr);
    dragSatMS.setAttribute("data-band-id", itemToReplaceAttr);
  }
  return false;
}

这是一个很好的衡量标准： Fiddle

Answer 2

亚斯＆＃39;答案是解决问题的一种方法。

但我现在将向您介绍另一种方法，即我在拖放时看到的所有教程都小心避免 - 我相信拖放API的使用提供了一个理想的情况，事件委托应该闪耀 - 但是，直到日期（据我所知），没有一个受欢迎的教程探索过这种方法。

如果您急于看到我的建议有效，请参阅this fiddle。

因此，您可以将拖动事件的处理委派给项目的父项ul。而不是交换被拖动元素的innerHtml与元素丢弃的元素，而不是交换 outerHtml 。

var draggedItem = null;
var ul = document.getElementById('ms-saturday');

// delegate event handling to the parent of the list items
ul.addEventListener('dragstart', buffer(handleDragStart), false);
ul.addEventListener('dragover', buffer(handleDragOver), false);
ul.addEventListener('drop', buffer(handleDrop), false);

function handleDragStart(e) {
  draggedItem = e.target;
  e.dataTransfer.effectAllowed = 'move';

  // dataTransfer is not really required, but I think IE may need it.
  // Also, not that if you must use dataTransfer API,
  // IE strongly requires that the mime type must be 'text'.
  e.dataTransfer.setData('text', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  e.dataTransfer.dropEffect = 'move';

  return false;
}

function handleDrop(e) {
  var tmp;

  if (e.stopPropagation) {
    e.stopPropagation();
  }

  if (draggedItem !== e.target) {
    // swapp outerHtml here
    tmp = draggedItem.outerHTML;
    draggedItem.outerHTML = e.target.outerHTML;
    e.target.outerHTML = tmp;;
  }

  return false;
}

// this is used to create the handlers so that there won't be
// a need to repeat 'if (e.target === ul) {...' for as many times
// as there are handlers needed.
function buffer(fn) {

  return function(e) {

    // ignore drag-and-drop on the parent element itself
    if (e.target === ul) {
      return;
    }

    fn.call(this, e);
  };
}

我让你根据自己的喜好改进这种方法。

HTML5可拖动列表 - 多个setData？

2 个答案: