poster/assets/manage/html/model.html

<style>
.draggable
{
  cursor: pointer;
}

#bg {
  background-image:url('http://192.168.33.10/sellking/data/upload/1/2022/10/12/4d5893ad6c7f3ca0680c615e360a6041.png');
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  border: 1px solid;
}
#item {
    width: 600px;
    height: 300px;
    border: 1px solid #ddd;
}

.custom-context-menu {
    position: fixed;
    border: 1px solid #ccc;
    font-size: 15px;
    background: white;
}

.custom-context-menu {
    position: fixed;
    border: 1px solid #ccc;
    list-style: none;
    border-radius: 4px;
    box-shadow: 0px 2px 6px 2px #ddd;
}

.custom-context-menu li {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
    user-select: none;
    transition: all 0.1s;
}
.custom-context-menu li:last-child {
    border-bottom: none;
}

.custom-context-menu li:hover {
    cursor: pointer;
    background-color: #009688;
    color: #fff;
}

.custom-context-menu li:active {
    background-color: #009688;
}

.hidden {
    display: none;
}
</style>
<div class="layui-fluid" style="padding: 0px;">
  <div id="bg">
    <div class="draggable" style="color:#fc0f0f;font-size: 16px;width: 50px;left:20px;top:20px;">微笑旋风</div>


    <div class="draggable"  style="width: 50px;height:50px;">
      <img src="http://192.168.33.10/dreamland/data/upload/1/2020/07/06/58802289df6119614c2095230384c2cb.jpg" style="width: 50px;height:50px;">
    </div>

  </div>
</div>

<script id="url">var url = ""</script>
<script>
var p = 1;
$( function() {
  var sort = $(".draggable").draggable({
      opacity: 0.7,
      containment: "#bg",
      addClasses: false,
      stop : function(event, ui) {
        var left = ui.position.left / p;
        var top = ui.position.top / p;
        $.post(url, {id:$(this).attr('data-id'),left:left,top:top}, function()
        {

        })
      }
  });

  $(".draggable").each(function() {
      let item = $(this).get(0);

      item.addEventListener('contextmenu', (e) => {
          e.preventDefault();
          let menu = item.getElementsByTagName('ul')[0]
          menu.style.top = `${e.clientY}px`;
          menu.style.left = `${e.clientX}px`;
          menu.classList.remove('hidden');

          let menuList = menu.getElementsByTagName('li')
          for (let menuItem of menuList) {
             
          }
      });
      item.addEventListener('click', () => {
          let menu = item.getElementsByTagName('ul')[0]
          menu.classList.add('hidden')
      })
  })

  $('#bg').each(function() {
    var img=$(this);
    var url=$(this).css('backgroundImage');
    s = url.match(/url\((.*?)\)/);
    url =s[1];
    if(url[0]=="\""){url = url.slice(1,-1)}
    $("<img/>").attr("src", url).load(function() {
        var realWidth = this.width;
        var realHeight = this.height;
        //如果真实的宽度大于浏览器的宽度就按照100%显示
        //var h = 500;
        //p = h / realHeight;
        var h = parseInt(realHeight*p);
        var w = parseInt(realWidth*p);
        img.css("height", h+"px");
        img.css("width",w+"px");

        $(".draggable").each(function() {
          var w = parseInt($(this).css("width")) * p;
          var h = parseInt($(this).css("height")) * p;
          $(this).css("width", w + 'px');
          $(this).css("height", h + 'px');
          if ($(this).find('img')) {
            $(this).find('img').css("width", w + 'px');
            $(this).find('img').css("height", h + 'px');
          }
          var l = parseInt($(this).css("left")) * p;
          var t = parseInt($(this).css("top")) * p;

          $(this).css("left", l + 'px');
          $(this).css("top", t + 'px');

          if ($(this).css("fontSize")) {
            var f = parseInt($(this).css("fontSize")) * p;
            $(this).css("fontSize", f + 'px');
          }

          $(this).show();
          
        });
    });
  });
});
</script>