Bewegtes Bild auf der Webseite

ist diese Lösung möglich in asp.net dragging picturebox inside winform on runtime

möchte ich nur in der Lage sein, ein Bild auf einem Webformular

bewegen zu können

Antwort auf "Bewegtes Bild auf der Webseite " 5 von antworten

Die Frage, auf die Sie verwiesen haben, ist in Fensterformen geschrieben. Sie können keine Drop-Elemente in Ihrem Webformular wie in Windows-Formularen ziehen.

Wenn Sie Elemente in einer Webanwendung ziehen und ablegen möchten, sollten Sie Client-seitigen Code verwenden.

Die beste Option auf Der Client-Seite ist die Verwendung einer Bibliothek, und die beste ist meiner Meinung nach JQuery UI in my opinion. . In the demo I linked user can drag a div element. Here is a simple dragging example with a static image and a server-side ASP.NET control : Benutzer kann ein div-Element ziehen. Hier ist ein einfaches Ziehen Beispiel mit einem statischen Bild und einem serverseitigen ASP.NET Steuerelement:

<head runat="server">
    <script src="js/jquery-1.3.2.min.js" language="javascript" ></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" language="javascript" ></script>
    <script type="text/javascript">
        $(function() {
            $("#draggable").draggable();
            $("#<%= imgServerControl.ClientID %>").draggable();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <!-- Static Draggable Image -->
    <img src="ac-dc.jpg" id="draggable" />

    <!-- ASP.NET server image control -->
    <asp:Image ImageUrl="ac-dc.jpg" ID="imgServerControl" runat="server" />
    </form>
</body>
</html>

Hinweis: Um diesen Code zu testen, müssen Sie nur die JQuery UI with draggable component mit ziehbarer Komponente from here and add it to your script folder. herunterladen und zu Ihrem Skriptordner hinzufügen.

Der Punkt, den Canavar & John Saumders zu machen versuchen, ist, dass Sie den Unterschied zwischen ASP.NET und clientseitigem UI-Code verstehen müssen.

Obwohl es wahr ist, dass ASP.NET Webforms eine bestimmte Menge an clientseitigem Code verwenden, um ihre Arbeit zu erledigen, hängt dies hauptsächlich mit der Kommunikation von UI-Ereignissen an die Serverseite zusammen, so dass sie verarbeitet werden können.

Wenn Ihr Drag-Drop-Vorgang zu einer serverseitigen Datenmanipulation führt (und dies ist sehr wahrscheinlich), müssen Sie auch die entsprechenden Informationen an die Serverseite übermitteln.

Die Konzepte sind ziemlich einfach, aber sie alle miteinander zu binden, kann schwierig sein - und hängt stark von Ihren zugrunde liegenden Webformularen und Anwendungsarchitektur ab.

Könnten Sie weitere Erläuterungen zur Anwendungsfunktionalität erstellen, was Sie erwarten würden, wenn ein Bild von einem Ort an einen anderen gezogen wird und ob/wie Sie erwarten, dass die Bildposition gespeichert wird.

Der "einfachste" Weg, dies zu tun, wäre die Vorteile der Asp.Net Ajax Control Toolkit DragPanel zu nutzen.

Während ich auf jeden Fall empfehlen, zu versuchen, dies mit JQuery zu tun. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx

Es funktioniert in Javascript genauso wie in einer Windows-Form: Sie behandeln das Mausverschiebungsereignis und jedes Tick, Sie aktualisieren die Position des Elements basierend auf der Position der Maus. Lesen Sie mehr über die event object in Javascript on w3schools, then try something like this (which will probably only work in IE, as that's where I just tested it): , dann versuchen Sie etwas wie diese (die wahrscheinlich nur in IE funktionieren, da das ist, wo ich es gerade getestet habe):

<html>
  <body onmousemove="handleMouseMove(event)">
  <img id="img"
    onmousedown="handleMouseDown(event);"
    onmouseup="handleMouseUp(event)" 
    src="http://img.youtube.com/vi/BML3EoeJ9Bk/default.jpg"
    ondrag="return false" />

  <script>
    var dragging = false; 
    function handleMouseDown() {
      dragging = true; 
    }
    function handleMouseUp() {
      dragging = false; 
    }
    function handleMouseMove(evt) {
      if (!dragging) return;
      var img = document.getElementById('img');
      img.style.position = 'absolute';
      img.style.left = (evt.clientX - 5) + 'px';
      img.style.top = (evt.clientY - 5) + 'px';
    }
  </script>
  </body>
</html>

Ich würde JQuery-UI draggable Plugin vorschlagen: http://docs.jquery.com/UI/API/1.7/Draggable

$("img").draggable();