Question

我试图实现Drag＆amp;通过指令使用AngularJS删除。

这就是我要做的事情：

codePen

但是我得到了一个“getData＆＃39;未定义的错误。

提前感谢。

Answer 1

我不认为你可以在dragStartEvent中存储一些内容并从droppedEvent中获取它。

我会将值存储在服务中。这看起来应该是

 using SwinGameSDK;
namespace MyGame
{
    public class Clock 
    {
        private Counter counter = new Counter();
        private int _seconds;
        private int _minutes;
        private int _hours;

        public Clock ()
        {
            _seconds = counter.SecondsCounter;
            _minutes = counter.MinutesCounter;
            _hours = counter.HoursCounter;
        }

        public int Seconds {
            get {
                return _seconds;
            }

            set {
                _seconds = value;
            }
        }

        public int Minutes {
            get {
                return _minutes;
            }

            set {
                _minutes = value;
            }
        }

        public int Hours {
            get {
                return _hours;
            }

            set {
                _hours = value;
            }
        }

        public void DrawClock ()
        {
            DrawHours ();
            SwinGame.DrawText (":", Color.Black, "Arial", 80, 360, 200);
            DrawMinutes ();
            SwinGame.DrawText (":", Color.Black, "Arial", 80, 520, 200);
            DrawSeconds ();
        }

        public void DrawHours ()
        {
            SwinGame.DrawText (Hours.ToString ("D2"), Color.Black, "Arial", 80, 250, 208);
        }

        public void DrawMinutes ()
        {
            SwinGame.DrawText (Minutes.ToString ("D2"), Color.Black, "Arial", 80, 410, 208);
        }

        public void DrawSeconds ()
        {
            SwinGame.DrawText (Seconds.ToString ("D2"), Color.Black, "Arial", 80, 560, 208);
        }

        public void UpdateClock ()
        {
            counter.UpdateCounter ();

        }

        public void ResetClock ()
        {
            counter.Reset ();

        }

        public void SetClock ()
        {
            counter.SetTimer ();
        }
    }
}


using System.Timers;

namespace MyGame
{
    public class Counter
    {
        private int _hoursCounter;
        private int _minutesCounter;
        private int _secondsCounter;

        public Counter ()
        {
            _hoursCounter = 0;
            _minutesCounter = 0;
            _secondsCounter = 0;
        }

        public int HoursCounter {
            get {
                return _hoursCounter;
            }
            set {
                _hoursCounter = value;
            }
        }

        public int MinutesCounter {
            get {
                return _minutesCounter;
            }
            set {
                _minutesCounter = value;
            }
        }

        public int SecondsCounter {
            get {
                return _secondsCounter;
            }
            set {
                _secondsCounter = value;
            }
        }

        Timer timer = new Timer ();

        public void SetTimer ()
        {
            timer.Interval = 1000;
            timer.Elapsed += (sender, e) => UpdateCounter ();
        }

        public void UpdateCounter ()
        {   
            timer.Start ();
            SecondsCounter += 1;
            if (SecondsCounter == 60) {
                SecondsCounter = 0;
                MinutesCounter += 1;
            }
            if (MinutesCounter == 60) {
                MinutesCounter = 0;
                HoursCounter += 1;
            }
            if (HoursCounter == 24) {
                HoursCounter = 0;
                MinutesCounter = 0;
                SecondsCounter = 0;
            }
        }



        public void Reset ()
        {
            HoursCounter = 0;
            MinutesCounter = 0;
            SecondsCounter = 0;
            timer.Close ();
        }
    }
}

using SwinGameSDK;

namespace MyGame
{
    public class GameMain
    {
        public static void Main ()
        {
            var myClock = new Clock ();

            //Open the game window
            SwinGame.OpenGraphicsWindow ("GameMain", 800, 600);
            SwinGame.ShowSwinGameSplashScreen ();

            //Run the game loop
            while (false == SwinGame.WindowCloseRequested ()) {
                //Fetch the next batch of UI interaction
                SwinGame.ProcessEvents ();

                //Clear the screen and draw the framerate
                SwinGame.ClearScreen (Color.White);
                SwinGame.DrawFramerate (0, 0);

                myClock.DrawClock ();
                myClock.SetClock ();
                if (SwinGame.MouseClicked (MouseButton.LeftButton)) {
                    myClock.UpdateClock ();
                }
                if (SwinGame.MouseClicked (MouseButton.RightButton)) {
                    myClock.ResetClock ();
                }

                //Draw onto the screen
                SwinGame.RefreshScreen (60);
            }
        }
    }
}

，应该像

一样使用

app.service('dragService', function(){
var currentId;
function setDragItemId(id){
  currentId=id;
 }
function getDragItemId(){
  return currentId;
}
 return{
  setDragItemId : setDragItemId,
  getDragItemId: getDragItemId
 }
})

从服务中获取它应该是不言自明的

Answer 2

好的，所以我想知道发生了什么。我将尽可能简洁地解释，但这只是我对“事件”对象的了解。请研究您自己的更详细信息。

问题不是在'drag'和'drop'指令中分配正确的'event'对象。因此，当您开始拖动元素时，会触发“事件”并创建一个“事件”对象，该对象包含所有相关信息，包括事件的“类型”，此信息位于名为“原始事件”的对象中”。

这是'原始事件'对象，这些'dragstart'和'drop'事件用于通信。因此，这个对象必须用于'drag'指令中的'setData'和'drop'指令中的'getData'。

像这样：

app.directive('myDrag', function(dragevent){
      
  return function(scope, attr, elem){
    
    elem.on('dragstart', function(dragevent){
      
       dragevent = event.originalEvent || event;
               dragevent.dataTransfer.setData('text',dragevent.target.id);
       
     }
   }         
            
  });
        


 app.directive('myDrop', function(dropevent){
      
      return function(scope, attr, elem){
        
        elem.on('dragover', function(event){
          event.originalEvent.preventDefault();
        }
        
        elem.on('drop', function(dropevent){
        
          dropevent = event.originalEvent || event;
      
          var data = dropevent.dataTransfer.getData('text');
        
          console.log(data); //Should output the id of the element dragged
        }
     }
       
});

我在这里也有一个有效的例子：

CodePen Example

再一次，这是我的理解。任何对此工作有深入了解的人，请随时纠正我或回答这个问题。

dataTransfer.getData未定义错误＆＃39; drop＆＃39;事件。

2 个答案: