在网页上编码拖放图像答案

【问题标题】：coding drag drop images on web page在网页上编码拖放图像
【发布时间】：2015-01-14 03:15:43
【问题描述】：

大约一个月前，我从 Idle_Mind 获得了一些很棒的帮助，我开发了一个 Visual Basic 桌面应用程序，孩子们可以通过该应用程序以正确的顺序拖放图像（图片框）。我在下面展示了 Idle_Mind 提供的代码。效果很好，深受学生喜爱。

现在，我正在尝试在网站上重新创建应用程序。我正在使用 Visual Web Developer 2008 Express。在“代码隐藏”中使用相同的代码会产生很多错误。看起来图像控件没有相同的拖放属性。

我应该尝试在“代码隐藏”中从 Visual Basic 中创建这些拖放行为，还是应该尝试使用 html 来完成这些？ Visual Web Developer 使用 Visual Basic.net 和 XHTML 1.0 Transitional（我相信）

一如既往，谢谢！

Public Class Form1

    Private Source As PictureBox = Nothing

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        For Each PB As PictureBox In Me.Controls.OfType(Of PictureBox)()
            PB.AllowDrop = True
            AddHandler PB.MouseMove, AddressOf PBs_MouseMove
            AddHandler PB.DragEnter, AddressOf PBs_DragEnter
            AddHandler PB.DragDrop, AddressOf PBs_DragDrop
            AddHandler PB.DragOver, AddressOf PBs_DragOver
        Next
    End Sub

    Private Sub PBs_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        Dim PB As PictureBox = DirectCast(sender, PictureBox)
        If Not IsNothing(PB.Image) AndAlso e.Button = Windows.Forms.MouseButtons.Left Then
            Source = PB
            PB.DoDragDrop(PB.Image, DragDropEffects.Copy Or DragDropEffects.Move)
        End If
    End Sub

    Private Sub PBs_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs)
        If e.Data.GetDataPresent(DataFormats.Bitmap) Then
            If My.Computer.Keyboard.CtrlKeyDown Then
                e.Effect = DragDropEffects.Copy
            Else
                e.Effect = DragDropEffects.Move
            End If
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub

    Private Sub PBs_DragOver(sender As Object, e As DragEventArgs)
        If e.Data.GetDataPresent(DataFormats.Bitmap) Then
            If My.Computer.Keyboard.CtrlKeyDown Then
                e.Effect = DragDropEffects.Copy
            Else
                e.Effect = DragDropEffects.Move
            End If
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub

    Private Sub PBs_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs)
        Dim PB As PictureBox = DirectCast(sender, PictureBox)
        PB.Image = e.Data.GetData(DataFormats.Bitmap)
        If e.Effect = DragDropEffects.Move Then
            If Not (PB Is Source) Then
                Source.Image = Nothing
            End If
        End If
    End Sub

End Class

【问题讨论】：

Web 应用程序不是桌面应用程序，它是完全不同的技术堆栈。在这种情况下，代码隐藏完全在服务器端运行，无法与用户界面实时交互。您想研究在 JavaScript 中实现此功能。幸运的是，拖放功能等功能已广泛使用插件来提供帮助。例如，看看 jQuery UI 插件。或interact.js，甚至只是MDN 文档：developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop
@David 这可能是一个很好的答案。
@Panzercrisis：我不确定，因为它与其说是一个“答案”，不如说是进一步资源的方向。但是重新阅读这个问题，我想你是对的。实在没有其他办法可以回答。
是的，您的回答确实给了我应该追求的方向。这主要是我想知道的。使用我拥有的 Visual Web Developer 2008 Express，我假设如果我下载其中一个 Jscript 插件，它将使我能够访问完成拖放功能所需的类、控件和属性。米之后？
@RicknTruckee：在这种情况下，不要将其视为“类、控件和属性”。您找到的任何 JavaScript 插件都不太可能为您提供与 Windows 窗体中相同的视觉设计器体验。我怎么强调技术堆栈的完全不同都不为过。如果您最终使用 jQuery 插件，那么您可能会在 DOM 元素（页面上的 HTML 元素）和这些元素上的事件（单击、拖动等）上进行操作。这不会在可视化表单设计器中完成，而是通过编写 JavaScript 代码来完成。

标签： vb.net

【解决方案1】：

Web 应用程序不是桌面应用程序，它是完全不同的技术堆栈。

本例中的代码隐藏完全在服务器端运行，无法与用户界面实时交互。您需要考虑在 JavaScript 中实现此功能。

幸运的是，拖放功能等功能已广泛使用插件来提供帮助。例如，看看jQuery UI plugins。或interact.js。（查看他们网站上的演示，了解您需要什么样的功能。）或者甚至只是the MDN documentation。

这不会像复制和粘贴代码那么简单。但是网上有很多资源可以帮助您实现该功能。

【讨论】：