Blazor+JS(div块鼠标按下、移动事件处理)

Question

div块鼠标按下、移动事件、松开处理，HTML文件正常
但在Blazor项目执行JS后，事件无效，DIV无法移动?
htlm如下：

        <div id="ID1" style="position:absolute;height: 60px; width: 100px;background-image:url(手腕带.png);background-repeat:no-repeat;cursor:move;left:200px;top:200px">
         <div style="background-color:Lime;display:inline-block;margin-top:40px;margin-left:20px;">1</div>
         <div style="background-color:Gray;display:inline-block;margin-top:40px;margin-left:35px;">2</div>
         <div style="text-align:center;">设备1</div>
        </div>
        <div id="ID2"  style="position:absolute;height: 60px; width: 100px;background-image:url(台垫.png);background-repeat:no-repeat;">
           <div style="background-color:red;display:inline-block;margin-top:40px;margin-left:50px;">1</div>
           <div style="text-align:center;">设备2</div>
        </div>
<script type="text/javascript">
<!--
 <!--ShowDev("ID1",200,100);-->
 <!--ShowDev("ID2",50,100);-->
 <!--ShowDev("ID3",100,50);-->
 MoveDev("ID1");
 MoveDev("ID2");
MoveDev("ID3");
-->
</script>

JS如下：

function ShoTL(obj){

var div = document.getElementById(obj);
    var topLength = div.getBoundingClientRect().top; //div离屏幕上边距离（长度）
    var leftLength = div.getBoundingClientRect().left; //div离屏幕左边距离（长度）
    alert(topLength+":"+leftLength);

}
function MoveDev(obja)
{
 if (typeof obja == "string") {
 var obj = document.getElementById(obja);
 obj.orig_index=obj.style.zIndex;
 //设置当前对象永远显示在最上层
 }
 obj.onmousedown=function (a){
 //鼠标按下
 this.style.cursor="move";
 //设置鼠标样式
 this.style.zIndex=1000;
  var d=document;
 if(!a) a=window.event;
 //按下时创建一个事件
 var x=a.clientX-document.body.scrollLeft-obj.offsetLeft;
 //x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
 var y=a.clientY-document.body.scrollTop-obj.offsetTop;
 //y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
 d.onmousemove=function(a){//鼠标移动
  if(!a) a=window.event;//移动时创建一个事件
  obj.style.left=a.clientX+document.body.scrollLeft-x;
  obj.style.top=a.clientY+document.body.scrollTop-y;
 }
 d.onmouseup=function (){//鼠标放开
  document.onmousemove=null;
  document.onmouseup = null;
  //ShoTL(obja);
  obj.style.cursor="normal";//设置放开的样式
  obj.style.zIndex=obj.orig_index;
 }
 } 
}
function ShowDev(obja,t,l)
{
 if (typeof obja == "string") {
 var obj = document.getElementById(obja);
 obj.orig_index=obj.style.zIndex;
 //设置当前对象永远显示在最上层
   obj.style.left=l;
   obj.style.top=t;
 }
}

Blazor如下：
c#c#

    private async void TestShow()
    {
        await runtime.InvokeVoidAsync("ShowHell");
        await runtime.InvokeVoidAsync("ShowDev", "ID2", 500, 500);
        await runtime.InvokeVoidAsync("MoveDev", "ID2");

    }

Answer 1

【以下回答由 GPT 生成】

要在Blazor项目中处理div块的鼠标按下、移动事件，可以按照以下步骤进行操作：

1. 确保在Blazor项目的HTML文件中正确引入了相应的JavaScript文件。
2. 在Blazor的组件文件中，使用ElementReference来获取div元素的引用。

<div @ref="divElement"></div>

@code {
    private ElementReference divElement;
}

1. 创建一个JavaScript字符串，包含处理鼠标按下、移动事件的代码。需要注意的是，这段JavaScript代码需要使用与Blazor项目中相同的命名空间。

private string jsCode = @"
    function MoveDev(obj) {
        var div = document.getElementById(obj);
        div.onmousedown = function(event) {
            var disX = event.clientX - div.offsetLeft;
            var disY = event.clientY - div.offsetTop;
            document.onmousemove = function(event) {
                div.style.left = event.clientX - disX + 'px';
                div.style.top = event.clientY - disY + 'px';
            };
            document.onmouseup = function(event) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    };
";

1. 在Blazor的组件文件中，使用JSRuntime来执行JavaScript代码。

@inject IJSRuntime JSRuntime

@code {
    private ElementReference divElement;

    private string jsCode = @"
        function MoveDev(obj) {
            var div = document.getElementById(obj);
            div.onmousedown = function(event) {
                var disX = event.clientX - div.offsetLeft;
                var disY = event.clientY - div.offsetTop;
                document.onmousemove = function(event) {
                    div.style.left = event.clientX - disX + 'px';
                    div.style.top = event.clientY - disY + 'px';
                };
                document.onmouseup = function(event) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        };
    ";

    protected override async Task OnAfterRenderAsync()
    {
        await JSRuntime.InvokeVoidAsync("eval", jsCode);
        await JSRuntime.InvokeVoidAsync("MoveDev", divElement.Id);
    }
}

通过以上步骤，你应该可以在Blazor项目中成功处理div块的鼠标按下、移动事件了。请根据你的具体需求进行相应的修改和调整。

【相关推荐】

• 看下这篇博客，也许你就懂了，链接：Blazor条形码识别应用：在Web中运行C#和JavaScript代码

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^