做一個可拖動的元素響應頁面

我有一個可調整大小和可拖動div，但不能使它響應窗口，我給了左20％，但如果我改變窗口大小的位置不會改變根據即使我給的屬性窗口的百分比的窗口，我想根據窗口百分比可拖動的元素的位置和大小，可以在這個問題的任何一個幫助做一個可拖動的元素響應頁面

$('div').resizable(); 
 
$('div').draggable({ 
 
    appendTo: 'body', 
 
    start: function(event, ui) { 
 
    isDraggingMedia = true; 
 
    }, 
 
    stop: function(event, ui) { 
 
    isDraggingMedia = false; 
 
    } 
 
});

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 

 
<body> 
 
    <div style="border:1px solid #00FF7F;position:absolute; display:inline-block; top:20%;left:20%; width:26%; height:26% ; overflow:hidden;"> 
 
    <img style=" width:100%; height:100%" src="http://www.clipartkid.com/images/68/baby-toys-jpg-19-feb-2010-10-37-50k-FSIRmi-clipart.jpg" /> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-04-26 Bhanu Tharun

上面的代碼正在工作，它應該是工作的方式，你到底想要什麼？ –

哪個瀏覽器給你帶來問題？ –

@AbhishekPandey我想他希望「可調整大小和可拖動div」的位置相對於窗口。 –

而不必一個清楚的想法，你想要完成什麼，很難知道這是否會幫你。

工作例如：https://jsfiddle.net/Twisty/ch3fhs3o/

HTML

<div class="diag"> 
    <img src="https://www.clipartkid.com/images/68/baby-toys-jpg-19-feb-2010-10-37-50k-FSIRmi-clipart.jpg" /> 
</div>

CSS

.diag { 
    border: 1px solid #00FF7F; 
    position: absolute; 
    display: inline-block; 
    overflow: hidden; 
} 

.diag img { 
    width: 100%; 
    height: 100%; 
}

的JavaScript

$(function() { 
    var isDraggingMedia; 
    $(".diag").css({ 
    width: Math.round($(window).width() * 0.26) + "px", 
    height: Math.round($(window).height() * 0.26) + "px", 
    top: Math.round($(window).height() * 0.20) + "px", 
    left: Math.round($(window).width() * 0.20) + "px" 
    }); 
    $(".diag").resizable(); 
    $(".diag").draggable({ 
    appendTo: 'body', 
    start: function(event, ui) { 
     isDraggingMedia = true; 
    }, 
    stop: function(event, ui) { 
     isDraggingMedia = false; 
    } 
    }); 
    $(window).resize(function() { 
    console.log("Window Width:", $(window).width(), "Height:", $(window).height()); 
    var dW = Math.round($(window).width() * 0.26); 
    var dH = Math.round($(window).height() * 0.26); 
    var dL = Math.round($(window).width() * 0.20); 
    var dT = Math.round($(window).height() * 0.20); 
    console.log("Dialog Width:", dW, "Height:", dH); 
    $(".diag").css({ 
     width: dW + "px", 
     height: dH + "px", 
     top: dT + "px", 
     left: dL + "px" 
    }).trigger("resize"); 
    }) 
});

我更喜歡設置一個類名，使選擇更容易。您可以看到，當調整window的大小時，它也會調整並重置可拖動的top, left。

這裏有一些注意事項，但我不確定這是你再次尋找的。

來源

2017-04-26 16:42:40 Twisty

做一個可拖動的元素響應頁面

回答

相關問題