قابل حمل HTML علامت بنانے کا طریقہ

یہاں تک سیکس کس طرح سے JavaScript اور CSS کا استعمال کرکے قابل حمل HTML علامت بنائیں

قابل حمل ڈی وی علامت بنائیں

پہلی قدم - HTML اضافہ کریں:

<!-- قابل حمل ڈی وی -->
<div id="mydiv">
  <!-- ایک ساتھ تھوڑا کا عنوان ڈی وی ڈی وی، کے بعد 'header' -->
  <div id="mydivheader">ایکسر کریں اور لگائیں</div>
  <p>ہجرت</p>
  <p>یہ</p>
  <p>DIV</p>
</div>

دوسری قدم - CSS اضافہ کریں:

یگانه اہم سٹائل یہ ہے position: absolute;،بقیه کا انتخاب آپ کا ہے:

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
دکومنٹ.ان مووس میووی = نل;
#mydivheader {
  پادشاهی: 10px;
  موس: move;
  زیرنویس: 10;
  رنگ پس‌زمینه: #2196F3;
  رنگ: #fff;
دکومنٹ.ان مووس میووی = نل;

مرحله سوم - اضافه کردن JavaScript:

// اجازه دهید که عنصر DIV قابل حرکت باشد:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // اگر وجود دارد، عنوان جایی است که شما DIV را حرکت می‌دهید:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  }
    // در غیر این صورت، از هر موقعیتی در DIV حرکت کنید:
    elmnt.onmousedown = dragMouseDown;
  دکومنٹ.ان مووس میووی = نل;
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // موقعیت ماوس هنگام شروع را دریافت کنید:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // هر بار که ماوس حرکت می‌کند، این تابع فراخوانی می‌شود: 
    document.onmousemove = elementDrag;
  دکومنٹ.ان مووس میووی = نل;
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // محاسبه موقعیت جدید ماوس:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // تنظیم موقعیت جدید عنصر:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  دکومنٹ.ان مووس میووی = نل;
  function closeDragElement() {
    // رهایی دکمه موس وقتی که فشرده شده است:
    document.onmouseup = null;
    دکومنٹ.ان مووس میووی = نل;
  دکومنٹ.ان مووس میووی = نل;
دکومنٹ.ان مووس میووی = نل;

}