可拖動內部與jquery排序

我有一個使用jQuery UI的divs的可排序列表。它工作正常。可拖動內部與jquery排序

但是，我想在div中的某些圖像是可拖動的。每次我嘗試拖動圖像時，div都會保持優先。可排序的div會被拖動。

好吧，所以我想我需要捕捉圖像上的mouseenter和mouseleave事件，並暫時禁用它在懸停時排序的div。這並沒有工作（也許我沒有這樣做，但正確的方式）

有誰知道如何得到這個工作？

對不起，如果這之前已經問過，但我沒有找到任何東西，當我搜查。

編輯：花了一點時間找到確切的地方。無論如何，這裏是目前可分類的代碼。

var oldColumn = ''; 
var systemColumnCounter = $(".systemColumn").length; 
$(".systemColumn").sortable({ 
    /* 
    accept-option mit neuer Version von JqueryUI 
    */ 
    accept: '.none', 
    placeholder: 'systemElementPlaceHolder', 
    connectWith: '.systemColumn', 
    dropOnEmpty: true, 
    items: 'div.systemElement', 
    forceHelperSize: true, 
    start: function(event, ui){ 
     oldColumn = ui.item.parent(); 
     $("body").myPopup("hideAll"); 



    }, 
    sort: function(event, ui){ 
     $(this).ElementBorderRemove(); 
     $(".systemElementPlaceHolder").addClass("systemBorderColor"); 
     $(".systemElementPlaceHolder").height(ui.helper.height()); 
    }, 
    stop: function(event, ui){ 
     var counter = 0; 
     var elementBefor = ''; 
     var elementAfter = ''; 
     var Item = ui.item; 
     var myColumn = Item.parent(); 

     if(oldColumn.children().length == 0) 
     { 
      oldColumn.append('<span class="columnEmptyMessage">Column is empty.</span>'); 
     } 

     myColumn.children().each(function(){  
      if($(this).hasClass("columnEmptyMessage") && myColumn.children().length > 1) 
      { 
       $(this).remove(); 
      }    

      if($(this).attr("id") == ui.item.attr("id")) 
      { 
       if(counter > 0) 
       { 
        elementBefor = myColumn.children().eq(counter-1).attr("id"); 
       } 

       if(counter < (myColumn.children().length - 1)) 
       { 
        elementAfter = myColumn.children().eq(counter+1).attr("id"); 
       } 
       return false; 
      } 
      counter++; 
     }) 

     serialStr = elementBefor + '|' + elementAfter + '|' + myColumn.attr("id") + '|' + ui.item.attr("id"); 
     if(!ui.item.hasClass("systemNewElement")) 
     { 
      $.ajax({ 
       url: "includes/administration.action.php", 
       type: "POST", 
       data: "action=elementItemSort&items="+serialStr, 
       dataType: "html", 
       cache: false, 
       success: function(data){      
        //alert(data); 
       }, 
       error:function(x,e){ 
       }, 
       complete: function(data){ 
       } 
      }); 
     } 
    } 
});

html有一些類systemColumn的div和裏面的東西是可排序的......這部分工作。

來源

2011-10-06 Tim Seguine

而代碼是？ – Andre

@Andre當我有機會時，我會很快發佈它。 –

您可能希望只考慮將div的一部分（img未包含的部分）作爲該div上的唯一位置，您可以通過使用「句柄」選項http://docs.jquery.com/UI/API/1.8/Draggable#option-handle單擊以開始排序。

你可以讓div的左邊有某種「移動」光標圖像，這樣用戶就可以看到它，並知道點擊它以便移動div來排序它。這消除了代碼中的複雜性，也消除了用戶端的混淆。

來源

2011-10-12 00:28:52

從它的外觀來看，我給出了我想要用於排序的元素列表。有沒有一種方法可以告訴它像「一切，但圖像標籤」？ –

我想我應該改寫那個。我可以通過它任意選擇器嗎？ –

我試過用句柄：'：not（img）'，它不起作用。但是這似乎與我想要的非常接近：處理：'span，p，li，h1，h2，h3，h4，h5，h6' –

可拖動內部與jquery排序

回答

相關問題