如何進行響應拖放絕對定位？

我正在使用JqueryUI製作dragNdrop網頁應用程序。問題是它沒有響應。有人可以幫我弄這個嗎？如何進行響應拖放絕對定位？

繼承人我的js代碼

$(document).ready(function() { 
$(".draggable").draggable({ 
    helper: "clone", 
    cursor: 'move' 
}); 
$("#dropzone").droppable({ 
    drop: function (event, ui) { 
     var canvas = $(this); 
     if (!ui.draggable.hasClass('object')) { 
      var canvasElement = ui.helper.clone(); 
      canvasElement.addClass('object'); 
      canvas.find("div").removeClass('activeElement');     
      canvasElement.addClass('activeElement'); 
      canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging'); 
      canvas.append(canvasElement);     


      canvasElement.css({ 
       left: (ui.position.left), 
       top: (ui.position.top), 
       position: 'absolute', 
       zIndex: 10    
      }); 

      canvasElement.draggable({ 
      cursor: 'move', 
      containment: '#dropzone' 
      }); 

} 

    } 
});

IM使用絕對定位。我如何使這種響應？

來源

2016-11-16 Jquery Newbie

我們需要更多關於您實際要求的信息。「響應式」很棒，但在你的情況下，這實際上意味着什麼？通常這是一個CSS /佈局的東西，但你只添加了你的JS。 – DBS

我只是想知道如何使這個響應。因爲我在跌落時使用絕對定位。這就是我上面的代碼。 –

你可以添加你的HTML嗎？而且我還不確定你在這方面的「迴應」是什麼意思，你想「迴應」什麼以及以什麼方式？ – DBS

我不確定，但我認爲你的問題是與元素內部的絕對定位，當該元素沒有相對定位。考慮以下幾點：

<div style="position: relative; width: 200px; height: 200px; background: #ccc;"> 
    <div style="position: absolute; left: 75; top: 90; background: #fff;">Hello World</div> 
</div>

相對內的絕對定位將會把孩子從父左側75個像素和90個像素從父的頂部。如果父母不是親屬，則孩子從文檔邊緣左側出現75像素，從文檔頂部出現90像素（或具有相對定位的下一個父親）。

將此應用於你的代碼，你不妨用這樣的：https://jsfiddle.net/Twisty/zzv5gdg2/

HTML

<div id="content"> 
    <div id="element"> 
    <div class="draggable ui-widget-content"> 
     <p>Drag me</p> 
    </div> 
    </div> 
    <div id="dropzone" class="ui-widget-header"></div> 
</div>

CSS

.draggable { 
    width: 90px; 
    height: 90px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
} 

#dropzone { 
    width: 200px; 
    height: 200px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
    position: relative 
}

jQuery的

$(function() { 

    $(".draggable").draggable({ 
    helper: "clone", 
    cursor: 'move' 
    }); 

    $("#dropzone").droppable({ 
    drop: function(event, ui) { 
     var canvas = $(this); 
     if (!ui.draggable.hasClass('object')) { 
     var canvasElement = ui.helper.clone(); 
     canvasElement.addClass('object'); 
     canvas.find("div").removeClass('activeElement'); 
     canvasElement.addClass('activeElement'); 
     canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging'); 
     canvas.append(canvasElement); 

     var off = canvas.position(); 
     var canElOff = { 
      left: ui.position.left - off.left, 
      top: ui.position.top - off.top 
     }; 

     canvasElement.css({ 
      left: canElOff.left, 
      top: canElOff.top, 
      position: 'absolute', 
      zIndex: 10 
     }); 

     canvasElement.draggable({ 
      cursor: 'move', 
      containment: '#dropzone' 
     }); 
     } 
    } 
    }); 
});

同樣，從你的文章中不清楚你正在努力完成什麼或者「響應」是什麼意思。如果你願意，可以編輯你的文章，並提供一個更好的例子或更清晰的問題。

來源

2016-11-16 18:54:07 Twisty

爵士Twisty。我試過你的代碼，它的工作！謝謝！ –

如何進行響應拖放絕對定位？

回答

相關問題